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Amos Q. Haviv 


软件 工程 师 ， 技 术 顾问 ，MEAN.1O 和 
MEAN.JS 的 创建 者 。Amos 有 近 十 年 的 全 
A bk 
业 。 过 去 的 三 年 中 ，Amos 一 直 在 使 用 
JavaScript 的 全 栈 解 决 方案 进行 开发 ， 包 括 
Node.js 和 MongoDB， 以 及 AngularJS 一 类 
的 前 端 MVC 框 架 。2013 年 ， 他 创建 了 
MEAN 应 用 的 第 一 个 样板 MEAN.IO， 目 前 
在 www.meanjs.org 继 续 开 发 MEAN 解 决 方 
案 。 他 还 在 各 类 会 议 上 做 一 些 Web 前 沿 技 
术 的 演讲 。 此 外 ， 他 还 为 多 家 公司 的 开发 
团队 提供 指导 。 


译 者 简介 


陈 世 帝 


曾经 当 过 老师 ， 做 过 运 维 ， 写 过 PHP， 现 在 
是 一 名 Node.js 程 序 员 ， 日 常 使 用 MEAN， 
从 事 手 机 游戏 行业 。 钻 研 技术 之 余 对 法 律 


比较 感 兴趣 。 
博客 地 址 : http://chensd.com。 
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提 要 





包括 MongoDB、Express、AngularJS 和 Node.js。 本 书 从 


MEAN 的 核心 框架 开始 ， 详 细 曾 述 了 每 一 种 框架 的 关键 概念 ， 如 何 正 确 地 设置 它们 ， 以 及 如 何 用 流行 的 模 


块 把 它 1 
MVC 架 





构 支 持 自己 





本 





门 连接 在 一 起 。 通 过 本 
的 项 目 开 发 。 最 后 ， 你 将 学 会 使 月 











区 适合 对 利 月 











的 实例 练习 ， 你 能 搭建 自 









































己 的 MEAN 应 用 架构 ， 通 过 添加 认证 层 ， 开 发 





不同 的 工具 和 框架 加 快 你 的 日 常 开发 进程 。 





日 MEAN 开发 现代 Web 应 用 感 兴趣 的 Web 开发 者 或 JavaScript 全 栈 开发 者 阅读 。 
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我 要 感谢 我 的 爱人 Einat Shahak， 感 谢 她 忍受 我 那 乱糟糟 的 工作 间 ， 忍 受 我 经 常 在 深 更 半夜 





召开 技术 会 议 。 她 见 订 





E 了 我 人 生 中 每 一 次 重要 的 转折 ,并 给 予 我 绝对 的 鼓励 和 支持 。 感 谢 我 的 父 


， 是 他 们 帮助 我 成 长 为 现在 的 我 。 感谢 我 的 兄弟 们 时 刻 提醒 我 要 成 为 怎样 的 人 。 我 还 要 感谢 我 
亲爱 的 朋友 和 同事 Roie Schwaber-Cohen, 没有 他 的 努力 和 支持 ,就 不 会 有 MEAN，, 也 不 会 有 这 本 


书 的 诞生 。 








最 后 ， 我 要 感谢 开源 社区 的 开发 人 员 和 贡献 者 们 ， 是 他 们 让 这 个 社区 强大 而 又 富有 创造 力 。 





我 从 你 们 身上 学 到 的 东西 ， 远 远 超出 了 我 的 想象 。 
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回首 1995 年 春天 ， 那 时 的 浏览 带 与 现在 大 不 一 样 。 万 维 网 面世 已 有 4 年 (标志 是 Tim 
Berners-Lee 编 写 的 第 一 个 浏览 器 ), 距 离 Mosaic 浏 览 右 的 首次 发 布 已 有 两 年 ,而 Internet Explorer 1.0 
过 几 个 月 也 要 发 布 了 ,万 维 网 开始 显露 出 流行 的 迹象 ,虽然 一 些 大 公司 对 这 一 领域 也 表现 出 兴趣 ， 
但 当时 真正 有 所 作为 的 却 是 一 家 名 为 Netscape 的 小 公司 。 


Netscape 当 时 广 受 欢迎 的 浏览 器 Netscape Navigator 正 在 进行 第 2 版 的 开发 , 而 此 时 客户 端 工程 
师 团队 和 联合 创始 人 Marc Anderseen 决 定 在 Navigator 2.0 中 移入 一 种 编程 语言 。 这 一 任务 分 配给 了 
软件 工程 师 Branden Eich， 从 1995 年 5 月 6 日 至 5 月 15 日 , 他 用 了 10 天 时 间 就 完成 了 。 这 一 语言 被 命 
名 为 Mocha ， 后 来 改名 为 LiveScript， 并 最 终 定名 为 JavaScript。 


1995 年 9 月 ,Netscape Navigator 2.0 发 布 , 它 改 变 了 大 家 对 浏览 器 的 看 法 。 至 1996 年 8 月 , Internet 
Explorer 3.0 实 现 了 对 JavaScript 的 支持 。 同 年 11 月 ，Netscape 宣 布 他 们 已 经 将 JavaScript 提 交 到 
ECMA 进 行 标 准 化 。1997 年 6 月 ， ECMA-262 规 范 公布 ,使 得 JavaScript 成 为 事实 上 的 Web 标 准 编程 


;五 二 
TH j= 


多 年 来 ，JavaScript 被 很 多 人 贬低 为 业余 爱好 者 使 用 的 编程 语言 。JavaScript 的 架构 、 碎 片 化 
的 实现 以 及 最 初 的 “业余 ”受众 ， 使 得 专业 程序 员 都 把 它 忽 视 了 。 直 到 AJAX 的 出 现 ， 以 及 2005 
年 左右 Google 发 布 了 Gmail 和 Google Maps, 此 时 AJAX 技 术 可 以 将 Web 网 站 转换 成 Web 应 用 的 形势 
才 突 然 明 朗 起 来 。 这 鼓舞 着 新 一 代 Web 开 发 人 员 推动 JavaScript 的 开发 ， 使 它 更 上 一 层 楼 。 


首先 是 第 一 代 工 具 库 问 世 了 ， 比 如 jQuery 和 Prototype。 不 久 ，Google 在 2008 年 年 底 又 发 布 了 
Google Chrome 和 它 使 用 的 V8 JavaScrip 二 | 警 。V8 的 即时 编译 器 极 大 提升 了 JavaScript 的 性 能 。 这 
开启 了 JavaScript 开 发 的 新 纪元 。 


2009 年 是 JavaScript 发 生 翻 天 履 地 变化 的 一 年 : Node.js 等 平台 使 开发 人 员 可 以 在 服务 器 上 运 
行 JavaScript; MongoDB 等 数据 库 普及 并 简化 了 JSON 存 储 ; AngularJS 等 框架 开始 使 用 强大 的 新 一 
代 浏 览 器 。JavaScript 从 面世 到 无 所 不 在 ,用 了 将 近 20 年 时 间 。 曾 经 被 “门外汉 ”用 来 执行 小 脚本 
的 编程 语言 ， 如 今 已 经 成 为 世界 上 最 流行 的 编程 语言 之 一 。 不 断 丰 富 的 开源 协作 工具 , 连同 乐于 
奉献 的 天 才 工 程 师 们 ,创造 出 了 世界 上 最 有 价值 的 社区 之 一 。 而 这 些 贡献 者 们 种 下 的 种 子 ， 如 今 
正 以 涌 录 般 的 创造 力 莲 勃 生长 。 
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这 一 变革 的 影响 是 巨大 的 。 过 去 的 开发 团队 是 分 立 的 , 每 个 人 都 是 各 自 领 域 的 专家 , 现在 全 
部 都 使 用 同一 种 语言 进行 更 加 精益 、 更 加 敏捷 的 软件 开发 ， 成 为 了 一 个 统一 的 团队 。 


如 今 已 经 有 许多 的 JavaScript 全 栈 开 发 框架 , 有 些 由 伟大 的 团队 所 开发 , 有 些 解决 了 很 重要 的 
问题 , 但 没有 一 个 像 MEAN 这 样 开放 而 又 兼 具 模块 化 MEAN 的 理念 很 简单 , 用 MongoDB 作 为 数 
据 库 ，Express 作 为 Web 框 架 ，AngularJS 作 为 前 端 框 架 ，Node.js 作 为 平台 ,并 运用 模块 化 的 方法 
将 它们 整合 在 一 起 ,以 保证 其 符合 现代 软件 开发 的 灵活 性 。MEAN 方 法 依赖 于 其 各 开源 模块 的 社 
区 , 这 保持 了 它 的 更 新 和 稳定 , 并 确保 即使 某 一 模块 无 法 使 用 , 也 可 以 用 更 适合 的 模块 无 颖 替换 。 


欢迎 你 参与 到 JavaScript 的 变革 中 ， 我 保证 将 尽 全 力 帮助 你 成 为 一 个 JavaScript 全 栈 工 程 师 。 


在 本 书 里 ， 我 们 将 帮 你 配置 开发 环境 ， 说 明 怎 样 用 最 合适 的 模块 来 连接 MEAN 的 各 个 组 件 。 
我 们 会 介绍 保持 代码 简单 、 清 晰 以 及 避免 常见 问题 的 最 佳 实践 。 我 们 还 会 讲解 如 何 创 建 你 的 身份 
验证 层 ， 并 添加 首 个 实体 。 你 会 学 到 如 何在 创建 服务 器 端 和 客户 端 应 用 程序 之 间 的 实时 通信 时 ， 
利用 JavaScript 的 非 阻塞 架构 。 最 后 , 我 们 还 会 向 你 展示 如 何 用 适当 的 测试 来 测试 代码 , 以 及 使 用 
哪些 工具 来 使 开发 过 程 自动 化 。 

























































































本 书 主要 内 容 
第 1! 章 “MEAN 简 介 ”， 让 你 初 识 MEAN， 并 学 会 在 不 同 的 操作 系统 上 安装 MEAN。 
第 2 章 “Node.js 人 人 门 ”， 介 绍 Node.js 的 基础 知识 ， 以 及 如 何 用 它 进行 Web 应 用 开发 。 
第 3 章 “ 使 用 Express 开 发 Web 应 用 ”, 说 明 如 何 创 建 和 构造 一 个 遵循 MVC 模 式 的 Express 应 用 。 
第 4 章 “MongoDB 入 门 ”"， 解 释 MongoDB 的 基本 理论 ， 以 及 如 何 用 它 来 存储 你 的 应 用 程序 








第 5 章 “Mongoose 入 门 ”， 演 示 如 何在 Express 应 用 中 使 用 Mongoose 来 连接 MongoDB 数 据 库 。 
第 6 章 “ 使 用 Passport 模 块 管理 用 户 权 限 ”， 介 绍 如 何 管理 用 户 身份 验证 和 提供 多 种 不 同 的 登 











章 “AngularJS 入 门 ”， 阐 述 如 何 实 现 一 个 与 Express 应 用 协同 的 AngularJS 应 用 。 
第 8 章 “ 创 建 MEAN 的 CURD 模 块 "， 解 释 如 何 编写 和 使 用 MEAN 应 用 中 的 各 种 实体 。 
章 “ 基 于 Socket.io 的 实时 通信 ”， 展 示 如 何在 客户 端 与 服务 器 间 创 建 和 使 用 实时 通信 。 
第 10 章 “MEAN 应 用 的 测试 "， 介 绍 如 何 针对 MEAN 应 用 的 不 同 部 分 进行 自动 化 测试 。 
章 


“MEAN 应 用 的 调试 与 自动 化 ”， 解 释 如 何 让 你 的 MEAN 应 用 更 发 更 加 高 效 。 


















































图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





Jy 





阅读 本 书 的 前 提 
本 书 适合 对 HTML、CSS 和 现代 JavaScript 开 发 有 一 定 了 解 的 初级 和 中 级 Web 开 发 人 员 。 
本 书 读者 


对 使 用 MongoDB、Express 、AngularJS 和 Node.js 开 发 现代 Web 应 用 有 兴趣 的 Web 开 发 人 员 。 





排版 约定 


在 本 书 中 ,你 会 发 现 一 些 不 同 的 文本 样式 ,用 以 区 别 不 同 种 类 的 信息 。 下 面 是 这 些 样式 的 一 
些 例子 和 解释 。 


@ 楷体 
表示 新 术语 。 














e@ 等 完 字体 
表示 程序 中 使 用 的 变量 名 、 关 键 字 。 
代码 段 格式 如 下 所 示 : 

var message =, "Hello"? 
exports.sayHello = function(){ 


console.log (message); 


} 

当 我 们 希望 你 注意 代码 块 中 的 某 些 部 分 时 ， 相 关 的 行 或 者 文字 会 被 加 粗 : 
Var connect = require('connect'); 

Var app = connect(); 

app.listen(3000); 

console.log('Server running at http://localhost:3000/'); 


命令 行 输入 或 输出 如 下 所 示 : 


$ node server 
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< 
| Q 这 个 图 标 表示 提示 或 者 技巧 。 ] 


读者 反馈 
欢迎 提出 反馈 。 如 果 你 对 本 书 有 任何 想法 ,喜欢 它 什 么 ,不 喜欢 它 什么 ,请 让 我 们 知道 。 要 
写 出 真正 对 大 家 有 帮助 的 图 书 ， 读 者 的 反馈 很 重要 。 
一 般 的 反馈 ， 请 发 送 电子 邮件 至 feedback@packtpub.com， 并 在 邮件 主题 中 包含 书 名 。 


如 有 果 你 有 某 个 主题 的 专业 知识 , 并 且 有 兴趣 写成 或 帮助 促成 一 本 书 , 请 参考 我 们 的 作者 指南 
http://www.packtpub.com/authors。 

















客户 支持 


现在 ， 





付 


多 是 一 位 令 我 们 自豪 的 Packt 图 书 的 拥有 者 ， 我 们 会 尽 全 力 帮 你 充分 利用 你 手中 的 书 。 


下 载 示 例 代码 


你 可 以 用 你 的 账户 从 http://www.packtpub.com 下 载 所 有 已 购买 Packt 图 书 的 示例 代码 文件 。 如 
果 你 从 其 他 地 方 购买 本 书 ， 可 以 访问 http://www.packtpub.com/support 并 注册 ， 我 们 将 通过 电子 邮 
件 把 文件 发 送 给 你 。 





勘误 表 

虽然 我 们 已 尽力 确保 本 书 内 容 正 确 ， 但 出 错 仍旧 在 所 难免 。 如 果 你 在 我 们 的 书 中 发 现 错误 ， 
不 管 是 文本 还 是 代码 ,希望 能 告知 我 们 ， 我 们 不 胜 感激 。 这 样 做 ， 你 可 以 使 其 他 读者 免 受 挫败 ， 
帮助 我 们 改进 本 书 的 后 续 版 本 。 如 果 你 发 现任 何 错误 ， 请 访问 http:/www.packtpub.com/ 
submit-errata 提 交 ， 选 择 你 的 书 ， 点 击 勘 误 表 提交 表单 的 链接 ， 并 输入 详细 说 明 。 勘 误 一 经 核实 ， 
你 的 提交 将 被 接受 ， 此 勘误 将 上 传 到 本 公司 网 站 或 添加 到 现 有 勘误 表 。 从 http://www.packtpub. 
com/support 选 择 书 名 就 可 以 查看 现 有 的 勘误 表 。 









































图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 机 


| 





Jy 





侵权 行为 
版 权 材料 在 互联 网 上 的 盗版 是 所 有 媒体 都 要 面 对 的 问题 。Packt 非 常 重视 保护 版 权 和 许可 证 。 
如 果 你 发 现 我 们 的 作品 在 互联 网 上 被 非法 复制 , 不 管 以 什么 形式 , 都 请 立即 为 我 们 提供 位 置地 址 
或 网 站 名 称 ， 以 便 我 们 可 以 寻求 补救 。 


请 把 可 疑 盗版 材料 的 链接 发 到 copyright@packtpub.com。 
非常 感谢 你 帮助 我 们 保护 作者 ， 以 及 保护 我 们 给 你 带 来 有 价值 内 容 的 能 








问题 


如 果 你 对 本 书 内 容 存 有 疑问 ， 不 管 是 哪个 方面 ， 都 可 以 通过 questions@packtpub.com 联 系 我 
们 ， 我 们 将 尽 最 大 努力 来 解决 。 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 机 























第 1 章 MEAN 简介 ee 1 
1.1 三 层 Web 应 用 开发 1 
1.2 JavaScript 的 演进 站 » 
1.3 MEAN 简介 | 
1.4 安装 MongoDB RN 4 

1.4.1 在 Windows 上 安装 MongoDB ……5 

1.4.2 在 MacOSX 和 Linux 上 安装 
MongoD 了 et 也 
1.4.3 ”使 用 MongoDB 命令 行 工 具 ……… 8 
1.5 安装 Node.js ee 9 
1.5.1 在 Windows 上 安装 Node.js……… 10 
1.5.2 在 Mac OSX 上 安装 Node.js*…… 11 
1.5.3 在 Linux 上 安装 Node.js 12 
1.5.4 ”运行 Node .js 12 
1.6 ”NPM 简介 13 
1.7 总结 18 

第 2 章 ”Node.js 入门 19 

2.1 Node.js 简介 
2.1.1 JavaScript 事件 驱动 编程 … 
2.1.2 ”Node.js 事件 驱动 编程 …………… 

2.2 JavaScript 闭 包 

2.3 ”Node 模块 ee 
2.3.1 Common]JS 模块 
2.3.2 Node.js 核心 模块 26 
2.3.3 ”Node.js 第 三 方 模块 
2.3.4 Nodejs 文件 模块 ee 
2.3.5 ”Node.js 文 件 夹 模块 

2.4 Node.js Web 应 用 开发 ……e 

2.5。 总结 

图 灵 社 区 会 


录 









































第 3 章 使 用 Express 开发 Web 应 用 ……35 
3.1 Express 简介 35 
3.2 Express 安装 36 
3.3 ”创建 第 一 个 Express 应 用 pp 36 
3.4 应用、 请求 和 响应 对 象 怕 PP 37 

3.4.1 应 用 对 锡 er. 37 
3.4.2 请求 对 象 RN 38 
3.4.3 ”响应 对 得 ee 38 
3.5 外 部 的 中 间 件 Ne 39 
3.6 ”实现 MVC 模式 和 40 
3.7 Express 应 用 配置 48 
3.8 泻 染 视图 $51 
3.8.1 配置 视图 系统 enn, 51 
3.8.2 ”EJS 视图 泻 染 和 53 
3.9 ”静态 文件 服务 和 53 
3.10 ”配置 会 话 …ee. 55 
3.11 总结 57 

第 4 章 MongoDB A 入 站 ei 58 
4.1 NoSQL 简介 
4.2 MongoDB 简介 60 
4.3 MongoDB 的 关键 特性 ……………… 

4.3.1] BSON 格式 
4.3.2 MongoDB 即席 查询 … 
4.3.3 MongoDB 索引 ee 
4.3.4 MongoDB 副本 集 和 ppp 
4.3.5 MongoDB 分 片 
4.4 MongoDB 命令 行 工 具 
4.5 MongoDB 数据 摩 es 
4.6 MongoDB 集合 和 
4.7 MongoDB 增删 改 查 操作 …………………… 67 


员 打 顺 顺 (lvshun@live.cn) 专 享 


尊 


重 版 权 




































































2 目 录 
4.7.1 创建 新 文档 67 6.2 ”理解 Passport 策略 ee 95 
4.7.2” 读 取 广 档 富 eee 68 6.2.1 使 用 Passport 的 本 地 策略 a 95 
4.7.3 更 新 已 有 文档 和 69 6.2.2 修改 User 模型 pp 97 
4.7.4 删除 文 模 pe 70 6.2.3 创建 身份 验证 视图 .pp 99 
4.8 总 结合 71 6.2.4 ”修改 用 户 控 制 器 ee 101 
Eo 6.2.5 添加 用 户 路 本 Ne 105 
第 5 章 Mongoose 入门 72 a9， 章 裤 i Od 0 
5.1 Mongoose 简介 和 72 (CV 118 
5.1.1 安装 MongOOSeE pp 72 
5.1.2 ”连接 MongoDB RN 73 第 7 章 AngularJS A 入 站 119 
5.2 ”理解 Mongoose 的 模式 和 pe 74 7.1 AngularJS 简介 和 ee 119 
5.2.1 创建 User 模式 与 模型 …………… 74 7.2 AngularJS 的 核心 概念 ……… 119 
5.2.2 ”注册 USer 模型 pe 75 7.2.1。 核心 模块 120 
5.2.3 使 用 save() 创 建新 文档 ………… 75 7.2.2 ”模块 120 
5.2.4 使 用 find() 查找 多 个 文档 ……… 7 7.2.3 ”双向 数据 绑 定 pe 121 
5.2.5 使 用 findone () 读 取 单 个 yp DE 122 
二 79 7.2.5 AngularJS 指 全. 123 
5.2.6 ”更 新 已 有 文档 和 80 72.6 AngularJS 应 用 的 引导 ee 124 
5.2.7 删除 已 有 文档 和 81 7.3 ”安装 AngularJS 125 
5.3 扩展 Mongoose 模式 82 7.3.1 Bower 包 管理 器 eee 125 
5.3.1 A Ce 82 7.3.2 配置 BoWer pe 126 
a 光 7.3.3 ”使 用 Bower 安装 AngularJS …… 126 
5.3.3 增加 应 所 局 性 ee ee 85 Rt eA i 1 
5.3.4 ”使 用 案 引 优化 查询 85 7.4 AngularJS 应 用 的 结构 pp 127 
5.4 模型 方法 自 定 尺 86 
- . 7.5 引导 AngularJS 应 了 130 
5.4.1 自 定 义 静 态 方法 RN 86 2 
5.4.2” 自 定义 实例 方法 eeeenienee。 87 0 Ansularls 的 MYVC 实 体征 2 
7.6.1 视图 ee 132 
505 并 型 的 禄 er oD i 87 te 
ed 人 7.6.2 ”控制 器 和 ScOope pp 133 
5.5.2 自 定义 的 验证 路 es 89 J i a ee 135 
5.6 ”使 用 Mongoose 中 间 件 和 pp 89 7.7.1 稀有 家 Es 模 决 wb 136 
5.6.1 预 处 理 中 间 件 ee 89 7.7.2 配置 URL 模式 A 137 
5.6.2 ”后 置 处 理 中 间 件 和 pe 90 7.73 AngularJS 应 用 路 由 137 
57 使 ] MOnboOde DRE 90 7.8 AngularJS 服务 
5 徐 结 全 各 全 全 交 汪 0 训 91 8 了 负 直 服务 Evi 
7.8.2” 自 定义 服务 
第 6 章 使 用 Passport 模块 管理 用 户 7.8.3 服务 的 使 用 
权限 ee 92 7.9 管理 AngularJS 的 身份 验证 :pp 141 
6.1 Passport 简介 92 7.9.1 将 user 对 象 填充 到 视图 ………… 141 
6.1.1 安装 92 7.9.2 ”添加 身份 验证 服务 ………………… 142 
6.1.2 配置 93 7.9.3 ”使 用 身份 验证 服务 ………………… 144 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 































































































目 录 3 
7.10 ”总 缚 144 9.4.6 实现 ee 187 
i i 9.5 总 结伙 189 
第 8 章 创建 MEAN 的 CURD 模块 …… 145 
8.1 .CGIUERTD 模 下 简章 下 第 10 章 MEAN 应 用 的 测试 ………………… 190 
8.2 配置 Express 组 件 和 7 10.1 JavaScript 测试 简介 ， 和 ee 190 
8.2.1 创建 Mongoose 模型 10.1.1 TDD、BDD 和 单元 测试 ……… 191 
8.2.2 ”建立 Express 控制 器 10.1.2 ”测试 框架 和 pp 192 
8.2.3 编写 Express 路 由 ……… 0 ee re Ree 192 
8.2.4 配置 Express 应 用 een 10.1.4 ”测试 执行 过 程 管理 工具 ……… 192 
03 nonesousee 也 们 eee de 10.2 ”Express 应 用 测试 ………………eeeeeeeeeeeeeeeeennen 193 
8.3.1 安装 ngResource 模块 ………… 154 10.2.1 ”Mocha 简介 193 
8.3.2 使 用 Sresource 服务 10.2.2 ”Shouldjs 简介 pe 194 
8.4 实现 AngularJS 的 MVC 模块 10.2.3 SuperTest 简介 pe 194 
8.4.1 创建 模块 服务 10.2.4 Mocha 的 安装 和 pe 195 
8.4.2 ”建立 模块 控制 器 … 10.2.5 安装 Should.js 和 SuperTest 
8.4.3 ”实现 模块 视图 简 玉 195 
8.4.4 编写 AngularJS 路 由 和 pp 10.2.6 ”测试 环境 配置 和 pe 196 
8.5 最 终 实现 和 PN 10.2.7 编写 Mocha 测试 怕 ppp 197 
8.6 总结 10.2.8 ”执行 Mocha 测试 划 pp 201 
人 有 站 人， 10.3 ”AngularJS 应 用 测试 和 202 
第 9 章 基于 Socket.io 的 实时 通信 …… 167 10.3.1 Jasmine 框架 简介 :es 203 
9.1 WebSockets 简介 10.3.2 AngularJS 单元 测试 ……… 303 
ep We RD 10.33 AngularJS E2E 测试 …… 5 和 
9.2.1 Socket.io 服务 器 端 9 217 
9.2.2 ”Socket.io 客户 端 对 
9.2.3 ”Socket.io 的 事件 ee 第 11 章 MEAN 应 用 的 调试 与 自动 化 …218 
9.2.4 Socket.io 命名 空间 11.1 构建 工具 Grant 218 
9.2.5 ”Socket.io 的 房间 和 pp DN By I 218 
9.3 ”Socket.io 的 安装 11.1.2 ”Grunt 的 配置 .pe 220 
9.3.1 配置 Socket.io 的 服务 器 ………… 177 11.2 ”使 用 node-inspector 调试 Express 
9.3.2 ”配置 Socket.io 的 会 话 a 178 程序 I 230 
9.4 使 用 Socket.io 创建 聊天 室 …………… 182 11.2.1 使 用 Grunt 任务 安装 
9.4.1 设置 聊天 服务 器 的 事件 处 理 node-inspector “eee 231 
11.2.2 使 用 Grunt 任务 配置 
9.4.2 node-inspector eee. 232 
11.2.3 使 用 Grunt 任务 运行 调试 ……234 
9.4.3 11.3 ”使 用 Batarang 调试 AngularJS 程序 …236 
9.4.4 11.4 总结 241 
9.4.5 
图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





MEAN 简介 











MEAN 是 一 个 强大 的 JavaScript 全 栈 解决 方案 ， 它 由 四 大 组 件 组 成 : 数据 库 MongoDB 、Web 
服务 器 框架 Express 、Web 客 户 端 框架 AngularJS， 以 及 服务 器 平台 Node.js。 这 些 组 件 由 不 同 的 团 
队 开 发 ， 由 开发 人 员 和 倡导 者 组 成 的 社区 推动 各 个 模块 的 开发 ， 并 为 其 创建 相关 文档 。MEAN 的 
主要 优势 在 于 其 以 JavaScript 为 主要 的 编程 语言 。 但 是 , 将 这 些 组 件 结合 起 来 会 导致 扩展 和 架构 问 
题 ， 这 会 极 大 影响 开发 过 程 。 


本 书 将 介绍 搭建 MEAN 应 用 的 最 佳 实践 以 及 搭建 过 程 中 存在 的 一 些 已 知 问题 。 在 真正 开始 
MEAN 开 发 前 ,首先 需要 配置 环境 。 本 章 仅 涉及 一 点 编程 概述 ， 主 要 介绍 如 何 正 确 搭建 MEAN 应 
用 基本 环境 。 学 完 本 章 ， 你 将 知晓 如 何在 常见 的 操作 系统 上 安装 和 配置 MongoDB 及 Nodejs， 以 
及 如 何 使 用 Node.js 的 包 管 理 器 。 本 章 主 要 包含 如 下 内 容 : 


口 MEAN 的 架构 介绍 ; 

口 在 Windows、Linux 及 Mac OS X 上 安装 和 运行 MongoDB ; 

口 在 Windows 、Linux 及 Mac OS X 上 安装 和 运行 Node.js; 

口 Node.js 包 管理 器 (NPM ) 介绍 ， 以 及 如 何 使 用 它 来 安装 Node 模 块 。 





























1.1 三 层 Web 应 用 开发 


大 多 数 Web 应 用 都 采用 了 三 层 架构 ， 包 括 数据 层 、 逻 辑 层 和 展现 层 。Web 应 用 的 应 用 结构 通 
常 分 为 数据 库 、 服 务 器 和 客户 端 ， 而 在 现代 Web 开 发 中 ， 它 还 可 以 分 为 数据 库 、 服 务 器 逻辑 、 客 
户 端 逻 辑 和 客户 端 UL。 

MVC 架 构 是 实现 三 层 架构 的 一 种 比较 流行 的 范式 。 在 MVC 范 式 中 逻辑、 数据 与 显示 分 别 
被 转化 为 三 种 对 象 ， 每 个 对 象 都 有 其 独特 的 功能 。 视 图 ( View ) 控制 显示 部 分 ， 处 理 用 户 交互 。 
控制 器 ( Controller ) 响应 系统 和 用 户 事件 ， 支 配 模型 和 视图 作出 相应 的 变化 。 模 型 (Model ) 负 
责 数 据 操作 ， 根 据 控制 器 的 指令 对 数据 请 求 和 状态 修改 作出 响应 。 下 图 简单 地 描述 了 MVC。 
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常规 MVC 架 构 的 通信 


在 过 去 25 年 的 Web 开 发 中 ， 很 多 创建 三 层 Web 应 用 的 技术 流行 起 来 ， 在 这 些 已 经 普遍 存在 的 
技术 中 ,你 可 能 听 说 过 LAMP、.NET， 以 及 其 他 很 多 框架 或 工具 。 但 这 些 技术 最 大 的 问题 是 每 层 
都 有 各 自 的 知识 基础 要 求 , 而 这 些 要 求 往往 又 超 出 了 单个 开发 人 员 的 能 力 所 及 , 这 一 点 会 迫使 团 
队 规 模 超 出 实际 所 需 ， 效 率 也 会 相应 降低 ， 并 且 会 带 来 各 种 未 知 的 风险 。 















































1.2 ”JavaScript 的 演进 


JavaScript 是 一 个 专 为 Web 创 造 的 解释 型 编程 语言 。 在 最 早 被 Netscape Navigator 浏 览 絮 支持 之 
后 ，JavaScript 成 为 浏览 器 执行 客户 端 迎 辑 的 编程 语言 。 在 21 世 纪 的 第 一 个 十 年 中 期 ， 网 站 到 Web 
应 用 的 转换 , 以 及 高 速 浏览 器 的 发 布 , 促使 使 用 JavaScript 编 写 更 为 复杂 的 应 用 程序 的 开发 人 员 社 
区 逐步 形成 。 这 些 开 发 人 员 开 始 编写 一 些 库 和 工具 来 缩短 开发 周期 , 并 创造 出 了 新 一 代 更 为 高 端 
的 Web 应 用 ， 同 时 也 带 来 了 对 更 高 速 浏览 器 的 持续 需求 。 这 一 循环 持续 了 很 多 年 ， 浏 览 器 厂商 不 
断 改 进 他 们 的 浏览 器 ，JavaScript 程 序 员 又 不 断 地 提出 新 的 需求 。 真 正 的 革命 始 于 2008 年 ， 当 时 
Google 发 布 了 Chrome 浏 览 器 , 还 带 来 了 更 迅速 的 即时 编译 需 一 一 JavaScriptV8 引 擎 。Google 的 V8 
引擎 大 大 提升 了 JavaScript 的 执行 效率 ， 进 而 彻底 改变 了 Web 应 用 的 开发 过 程 。 更 重要 的 是 ，V8 
引 敬 是 开源 的 ， 允 许 开 发 人 员 在 浏览 器 之 外 重新 塑造 JavaScript。Node.js 是 这 次 革命 的 第 一 批 产 
物 之 一 。 


在 尝试 了 很 多 其 他 选择 后 ， 程 序 员 Ryan Dahl 发 现 V8 引 擎 刚好 适合 他 的 非 阻塞 JO 试 验 品 
Node.jjs。 该 试验 品 的 理念 很 简单 ,为 开发 人 员 创 建 一 个 非 阻塞 的 程序 , 让 他 们 更 好 地 利用 系统 资 
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源 并 编写 出 更 具 响 应 性 的 应 用 程序 。 最 终 通过 利用 JavaScript 的 非 阻 塞 特 性 , 一 个 极 小 但 是 功能 强 
大 , 且 独 立 于 浏览 器 的 平台 被 搭建 出 来 。 Node 简 炼 的 模块 系统 使 得 开发 人 员 能 够 通过 利用 第 三 

模块 自由 地 扩展 平台 ,从 而 使 几乎 所 有 功能 得 以 实现 。 在 线 社区 的 反作用 促进 了 多 种 工具 的 创建 ， 
从 现代 Web 框 架 到 机 器 人 服务 平台 等 。 然 而 ， 服 务 器 端 JavaScript 仅 仅 是 一 个 开始 。 


2007 年 , 已 经 在 Web 应 用 开发 中 积累 了 大 量 经 验 的 Dwight Merriman 和 Eliot Horowitz， 开 始 联 
手打 造 一 个 可 扩展 的 虚拟 主机 解决 方案 。 但 是 结果 不 尽 人 意 ， 因 此 在 2009 年 ,他 们 决定 将 平台 切 
分 后 开源 ， 其 中 包括 基于 V8 的 数据 库 一 一 MongoDB。MongoDB 的 名 字 来 源 于 humongous， 它 是 
一 个 使 用 类 JSON 动 态 模 式 数据 模型 的 可 扩展 NoSQL 数 据 库 。 通 过 使 开发 人 员 能 够 灵活 处 理 复杂 
数据 ， 以 及 提供 关系 数据 库 的 一 些 特性 ， 如 高 级 查询 和 易 扩展 性 ，MongoDB 备 受 瞩 目 。 而 其 所 
提供 的 特性 最 终 使 MongoDB 成 为 NoSQL 数 据 库 主导 解决 方案 之 一 。JavaScript 又 一 次 打破 了 边界 。 
然而 JavaScript 的 革命 者 们 没有 忘记 他 们 的 初 囊 ， 事 实 上 ， 现 代 浏 览 器 的 流行 创造 了 JavaScript 前 
端 框架 开发 的 新 浪潮 。 


2009 年 ，Misko Hevery 和 Adam Abrons 在 搭建 一 个 以 JSON 提 供 服务 的 平台 时 发 现 ， 仪 靠 
JavaScript 通 用 类 库 已 经 远 远 无 法 满足 需求 。 这 个 平台 的 富 Web 应 用 特性 需要 一 个 可 以 减少 枯燥 工 
作 , 并 能 维护 现 有 代码 库 的 结构 化 框架 。 在 放弃 了 最 开始 的 打算 后 ,他 们 决定 开发 一 个 满足 这 一 
需求 的 前 端 框架 一 -AngularJS ， 并 将 其 开源 。 想 法 是 将 HTML 和 JavaScript 更 好 地 融合 在 一 起 ， 
并 支持 推广 单 页 应 用 开发 。 最 终 一 个 语 Web 框 架 诞 生 了 ， 它 将 双向 数据 绑 定 、 跨 组 件 依赖 注入 、 
基于 MVC 的 组 件 等 概念 带 到 了 Web 前 端 开 发 人 员 面 前 。AngularJS 和 其 他 MVC 框 架 彻底 改变 了 
Web 前 端 开 发 ， 将 一 度 难 以 维护 的 前 端 代码 转化 为 支持 测试 驱动 开发 (TDD ) 等 高 级 开发 模式 的 
有 组 织 的 代码 库 。 
借助 不 断 丰富 的 开源 协作 工具 ， 乐 于 奉献 的 天 才 工 程 师 们 创造 了 世界 上 最 有 价值 的 社区 之 
一 。 更 重要 的 是 ， 这 些 主要 变革 使 得 在 三 层 Web 应 用 开发 中 ， 所 有 层 的 编程 语言 全 部 统一 到 
JavaScript 上 来 一 一 这 一 理念 被 称 之 为 全 栈 JavaScript，MEAN 是 这 一 理念 的 硕果 之 一 。 


















































































































































1.3 MEAN 简介 
































MEAN 是 MongoDB 、Express、AngularJS 和 Nodejs 的 缩写 。 其 理念 是 仅 使 用 JavaScript 一 种 语 
言 来 驱动 整个 应 用 。 其 最 鲜明 的 特点 有 以 下 几 个 : 

整个 应 用 只 使 用 一 种 语言 ; 

口 整个 应 用 的 所 有 部 分 都 支持 MVC 架 构 ， 而 且 都 必须 使 用 MVC 架 构 ; 

口 不 再 需要 对 数据 结构 进行 串 行 化 和 并 行 化 操作 ,只 需 使 用 JSON 对 象 来 进行 数据 封装 即 可 。 


但 是 ,依然 有 一 些 很 重要 的 问题 等 待 我 们 去 探索 答案 。 
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口 怎样 将 所 有 组 件 连 接 在 一 起 ? 

口 Node.js 是 一 个 由 众多 模块 组 成 的 庞大 生态 系统 ， 那 么 我 们 该 选择 哪些 模块 使 用 呢 ? 
口 JavaScript 是 范式 不 可 知 的， 那么 怎样 维护 应 用 的 MVC 结 构 ? 
口 JSON 是 一 个 不 需要 定义 模型 的 数据 结构 ， 那 么 应 该 在 何 时 以 怎样 的 方式 对 数据 进行 
建 模 ? 

口 怎样 处 理 用 户 的 身份 验证 ? 

口 怎样 用 Node.js 的 非 阻 塞 架 构 来 进行 实时 交互 ? 

口 怎样 测试 MEAN 的 代码 库 ? 

口 有 哪些 JavaScrip 开 发 工具 可 以 用 来 加 速 MEAN 应 用 的 开发 ? 


本 书 要 解决 的 问题 远 不 止 这 些 ， 但 在 开始 之 前 ， 首 先 需 要 安装 一 些 必 备 的 工具 。 







































































1.4 安装 MongoDB 





如 果 想 要 安装 MongoDB 的 稳定 最 简单 的 办 法 是 去 MongoDB 的 官方 网 站 上 下 载 二 进 制 安 
装 文件 ， | Mac OS X 和 Windows 相 应 的 版 本 。 务 必 注 意 ， 你 下 载 的 版 
本 必须 与 你 的 操作 系统 架构 相对 应 。 如 果 你 的 操作 系统 是 Windows 或 者 Linux， 请 根据 你 的 系统 
架构 下 载 32 位 或 者 64 位 版 本 ， 如 果 是 Mac OS X 则 最 好 下 载 64 位 版 本 。 


























MongoDB 的 版 本 号 规则 是 ,偶数 标明 的 是 稳定 版 ， 因 此 2.2.x 和 2.4.x 都 是 
稳定 版 ， 而 2.1.x 和 2.3.x 则 是 非 稳 定 版 ， 不 能 用 于 生产 环境 。 目 前 最 新 的 稳定 版 
是 2.6.X。 


在 MongoDB 的 下 载 页 面 (http://mongodb.org/downloads ), 下 载 包 含有 二 进 制 安装 文件 的 压缩 
包 。 下 载 完成 之 后 ， 将 压缩 包 解 压 。mongod 文 件 通常 位 于 bin 目 录 下 。mongod 进 程 运行 的 是 
MongoDB 服 务 器 的 主 进程 ， 它 可 以 作为 一 个 独立 的 服务 器 ， 也 可 以 作为 MongoDB 主 从 复制 集中 
的 从 结 点 。 在 这 里 ， 我 们 将 MongoDB 作 为 一 个 独立 服务 器 。mongod 进 程 需要 一 个 存储 数据 库 文 
件 的 文件 夹 ， 其 文件 夹 默认 为 /data/db ， 还 需要 一 个 监听 服务 器 端口 ， 其 默认 端口 为 27017。 在 接 
下 来 的 几 个 小 节 中 , 我 们 将 从 最 常用 的 Windows 开 始 , 来 逐步 了 解 MongoDB 在 不 同 操作 系统 中 的 














KW 与 MongoDB 相 关 的 更 多 信息 ， 请 参见 MongoDB 的 官方 文档 库 ( https:// 
mongodb.org )。 
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1.4 安装 MongoDB 





1.4.1 在 Windows 上 安装 MongoDB 


从 MongoDB 官 网 上 下 载 与 你 的 操作 系统 相对 应 的 安装 文件 后 ， 将 其 解压 ， 并 移动 到 
ci:\mongodb 路 径 下 。 在 Windows 系 统 中 ，MongoDB 上 默认 的 数据 文件 存储 目录 为 C:\data\db 。 在 命 
邻 提示 符 窗口 中 ， 进 入 到 c:\ 下 ,输入 如 下 的 命令 


> md data\db 














> 你 也 可 以 在 启动 mongod 时 ,通过 --dbpath 这 个 命令 行 参 数 来 指定 数据 文件 
存储 目 录 。 





将 MongoDB 的 文件 放 在 正确 的 位 置 ， 并 且 创 建 好 数据 存储 目录 后 ， 安 装 即 完成 。 有 以 下 两 


种 方式 来 运行 MongoDB 的 主 服务 。 


1. 手动 运行 MongoDB 服 务 




















想 要 手动 运行 MongoDB， 只 需要 运行 二 进 制 文件 mongod 即 可 。 打 开 命 令 提示 符 窗 口 ， 运 行 
如 下 命令 


> C:N\mongodb\binN\mongod .exe 


上 面 的 命令 可 以 启动 MongoDB 服 务 ， 监 听 27017 端 口 。 如 果 一 切 正常 ， 你 将 会 看 到 与 下 图 类 
似 的 命令 行 输出 。 





1 








国 C\Windows\system32\cmd.exe - C\mongodb\bin\mongod.exe 4 


bin\mongod .exe 
bs SacnaodbSbinNeonaod :8xa help for help and startup options 
2014-07-05T12:40:29.140+0300 
VANE LATE YA warning:; 32-bit servers don't have journaling enabled by defa 
. Please Use --journal if you want durability. 
:29.140+0300 
:29.140+0300 [initand1isten] MongoDB starfting : pid=976 port=27017 dbpath 
host=IE9win7 
:29.140+0300 [initandiisten] 
:29.140+0300 [initandlisten] ** NOTE: This is a 32 bit MongoDB binary. 
OST12:40:29.140+0300 [initandlisten] ** Ep 
an 2GB of data (or less with journal). 
2014-07-05T12:40:29.140+0300 [initand11sten] >* Note that journaling defaults to off 
for 32 bit and is currently off 


:40:29.140+0300 [initandlisten] 富 交 see http://dochub.mongodb.org/core/3 


:40:29.140+0300 [initandlisten] 

:40:29.140+0300 [initandlisten] targetMinOs: Vindons XP SP3 

:40:29.140+0300 [initandilisten] db version v2.6. 

:40:29.140+0300 [initandilisten] git version: 555f67a66f9603c59380b2a389e38691 


:29.140+0300 [initandlisten] build info: windows sys.getwindowsversion(maj 
“p41a 7601, platform=2, service_pack="Service Pack 1 ) BOOST_LIB_VERSION=1 


2014-07-05T12:40:29.1404+0300 [initand1isten] allocator: SYSTLeml 
2014-07-05T12:40:29.140+0300 [initandlisten] options: {} 
2014-07-05T12:40:29.156+0300 [initandlisten] waiting for connections on port 27017 














在 Windows 上 启动 MongoDB 服 务 
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当 Windows 安 全 级 别 较 高 时 ， 将 会 弹出 提示 你 禁止 相关 服务 功能 的 安全 警告 。 在 遇 到 这 种 情 
况 时 ， 请 选择 一 个 私有 网 络 并 点 击 允 许 访问 ( Allow Access )。 








+ 


你 应 该 了 解 的 是 ， 作 为 一 个 独立 的 服务 ，MongoDB 在 任何 当选 目录 下 都 能 
nn 


2. 以 Windows 系 统 服 务 方式 运行 MongoDB 


运行 MongoDB， 更 常规 的 做 法 是 在 每 次 系统 启动 后 自动 运行 该 服务 。 设 置 以 系统 服务 启动 
MongoDB， 需 要 为 MongoDB 的 日 志和 配置 文件 指定 一 个 存储 路 径 ， 运 行 以 下 命令 创建 该 路 径 : 











> md C:\mongodb\log 


接 下 来 ,可 以 通过 运行 --logpath 命 令 来 创建 MongoDB 的 配置 文件 。 在 命令 提示 符 窗 口中 ， 
输入 如 下 命令 : 








> echo logpath=C:\mongodb\log\mongo.1og > C:\mongodb\mongod .cfg 


配置 文件 创建 完成 后 , 以 管理 员 权 限 打 开 一 个 新 的 命令 提示 符 窗口 。 方 法 是 在 开始 菜单 或 者 
资源 管理 需 中 找到 命令 提示 符 的 图 标 , 单 击 右 键 并 选择 以 管理 员 身 份 运行 ( Run as administrator )。 
在 新 的 命令 提示 符 窗 口中 ， 运 行 如 下 命令 安装 MongoDB 服 务 : 














> sc.exe create MongoDB binPath= "\"C:\mongodb\bin\mongod.exe\" --service 
--config=\"C:\mongodb\mongod.cfg\"" DisplayName= "MongoDB 2.6" start= "auto" 


服务 创建 成 功 后 ， 将 会 输出 如 下 所 示 的 日 志 信 息 : 
[SC] CreateService SUCCESS 


注意 ， 要 想 系统 服务 成 功 安 装 ， 包含 logpath 参 数 的 配置 文件 必须 正确 创建 。 安装 完 
MongoDB 服 务 后 ， 以 管理 员 权 限 打开 命令 提示 符 窗口 ， 你 可 以 通过 运行 如 下 命令 来 启动 该 服务 : 





> net start MongoDB 


下 载 示 例 代码 
1 
六 如 果 是 通过 Packt 账 号 购买 的 Packt 图 书 , 可 以 在 http://www.packtpub.com 上 下 
载 相 关 的 示例 代码 文件 。 如 果 是 其 他 方式 ， 可 以 访问 http:/www.packtpub. 


com/support， 然 后 注册 申请 ， 以 邮件 方式 获取 其 示例 代码 文件 。 








注意 ， 如 有 和 需要， 可 以 对 MongoDB 的 配置 文件 进行 修改 。 详 情 请 参见 http://docs.mongodb. 


org/manual/reference/configuration-options/。 
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1.4.2 在 Mac OS X 和 Linux 上 安装 MongoDB 

这 部 分 将 介绍 在 Unix 系 统 上 安装 MongoDB 的 几 种 方法 。 下 面 从 最 简单 的 方法 开始 讲述 一 一 
使 用 下 载 的 MongoDB 已 预 编译 二 进 制 文件 。 

1. 使 用 二 进 制 文件 安装 MongoDB 

除了 从 http://www.mongodb.org/downloads 上 下 载 与 操作 系统 相应 的 二 进 制 文件 外 ， 也 可 以 用 
下 面 的 命令 使 用 CURL 来 下 载 : 

$ curl -0O http://downloads.mongodb.org/osx/mongodb-osx-x86 64-2.6.4.tgz 

上 述 命 令 下 载 的 是 Mac OS X 64 位 版 。 根 据 操作 系统 的 不 同 ， 需 要 对 这 个 命令 中 的 下 载 地 址 
进行 相应 的 修改 。 文 件 下 载 完成 后 ， 可 以 通过 下 面 的 命令 来 解压 : 









































$ tar -ZXVE mongodb-osx-x86 64-2.6.4.tgz 
使 用 下 面 的 命令 简化 解压 后 的 文件 夹 名 : 
$ mv mongodb-osx-x86_ 64-2.6.4 mongodb 


MongoDB 的 数据 文件 存储 在 其 默认 文件 夹 下 , 在 Mac OS X 和 Linux 系 统 中 ， 该 默认 文件 夹 的 
路 径 为 /data/db。 在 命令 行 工具 中 运行 如 下 的 命令 : 

















$ mkdir -p /data/db 


创建 文件 夹 时 可 能 会 出 现 一 些 权限 问题 , 使 用 sudo 或 者 超级 用 户 来 运行 上 述 
的 命令 即 可 。 























上 述 命令 的 -p 参 数 会 逐 级 创建 目录 ， 因 此 该 命令 会 创建 文件 夹 data 和 db。 需 要 注意 的 是 ， 所 
创建 的 文件 夹 并 不 处 于 home 目 录 下 。 运 行 如 下 命令 ,确保 设置 了 该 文件 夹 的 权限 : 


$ chown -R $USER /data/db 


一 切 就 绪 之 后 , 在 命令 行 工 具 中 , 进入 到 MongoDB 所 在 目录 的 bin 文 件 夹 , 启动 nongod 服 务 : 





$ cd mongodb/bin 
$ mongod 


这 就 启动 了 MongoDB 服 务 ， 并 开始 监听 27017 端 口 。 如 果 一 切 正常 ， 将 显示 类 似 于 下 图 的 命 
令 行 输出 : 
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@NAA bin 一 mongod 一 80x24 


Amoss-MacBook-Pro:bin Amos$ mongod 

mongod --help for help and startup options 

2014-07-07T23;31;48,.598+0300 [initandlisten] MongoDB starting : pid=46137 port=2 
7017 dbpath=/data/db 64-bit host=Amoss-MacBook-Pro,local 
2014-07-07T23:31:48.598+0300 [initandlisten] 

2014-07-07T23:31:48.59840300 [initandlisten] ** WARNING: soft rlimits too low. N 
umber of files is 256, should be oat least 1000 

2014-07-07T23:31:48.598+0300 [initandlisten] db version v2.6.3 
2014-07-07T23:31:48.598+0300 [initandlisten] git version: nogitversion 
2014-07-097T23:31:48.5984+0300 [initandlisten] build info: Darwin minimavericks.1o 
cal 13.2.6 Darwin Kernel Version 13,2.0: Thu Apr 17 23:;03:13 PDT 2014; root;xnu- 
2422 .100.13~1/RELEASE_X86_64 x86_64 BOOST_LIB_VERSION=1_49 


2014-07-07T23:31:48,598+0300 [initandlisten] allocator: tcmalloc 
20914-097-07T23:31:48.598+0306 [initandlisten] options: 自 
2014-07-07T23:31:48.599+0300 [initandlisten] journal dir=/data/db/journal 
2014-07-07T23:31:48,599+0300 [initandlisten] recover ; no journal files present, 
no recovery needed 

20914-07-07T23;31;48,.63240300 [initandlisten] waiting for connections on port 270 
17 








在 Mac OS X 上 启动 MongoDB 服 务 





2. 使 用 包 管 理 器 安装 MongoDB 


某 些 情况 下 ， 使 用 包 管 理 器 安装 MongoDB 是 最 简便 的 方法 。 不 过 缺点 是 有 些 包 管 理 器 并 没 
有 提供 对 最 新 版 本 的 支持 。 好 在 MongoDB 团 队 维护 着 针对 RedHat、Debian 和 Ubuntu 的 官方 包 ， 
并 支持 Mac OS X 的 Hombrew 包 管理 器 。 请 注意 ， 为 下 载 MongoDB 服 务 器 官方 软件 包 ， 必 须 对 配 
置 包 管理 器 库 进 行 配 置 。 

要 在 Red Hat Enterprise 、CentOS 和 Fedora 上 使 用 Yum 安 装 ， 请 参阅 http://docs.mongodb.org/ 
manual/tutorial/installmongodb-on-red-hat-centos-or-fedora-linux/。 






































要 在 Ubuntu 上 使 用 APT 安 装 MongoDB， 请 参阅 http://docs.mongodb.org/manual/tutorial/install- 


mongodb-on-ubuntu/。 





要 在 Debian 上 使 用 APT 安 装 MongoDB， 请 参阅 http://docs.mongodb.org/manual/tutorial/install- 
mongodb-on-debian/。 


要 在 Mac OS X 上 使 用 Homebrew 安 装 MongoDB ， 请 参阅 http:/docs.mongodb.org/manual/ 


tutorialinstall-mongodb-on-os-X/。 








1.4.3 ”使 用 MongoDB 命 令 行 工具 


MongoDB 压 缩 包 里 包含 一 个 MongoDB 命 令 行 工 具 ， 可 以 用 它 来 使 用 命令 行 与 运行 中 的 服务 
实例 进行 交互 。 进 入 MongoDB 的 bin 目 录 ， 运 行 mongo 服 务 即 可 启动 。 
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$ cd mongodb/bin 
$ mongo 











只 要 MongoDB 安 装 无 误 ， 命 令 行 工 具 将 自动 使 用 test 数 据 库 连 接 本 地 服务 实例 。 命 令 行 将 会 


有 类 似 于 下 图 的 输出 : 











[ES bin 一 mongo 一 80x24 


Amoss-MacBook-Pro:bin Amos$ mongo 
MongoDB shell version: 2.6.3 
connecting to; test 

> 





运行 如 下 命令 进行 数据 库 测 试 : 


> db.articles.insert({title: "Hello Wor 











在 Mac OS X 上 运行 MongoDB 命 令 行 工 具 


1d"}) 





上 述 命令 将 创建 一 个 名 为 article 的 集合 ， 并 搬入 一 个 包含 title 属 性 的 JSON 对 象 。 执 行 如 下 


命令 检索 article 集 合 中 的 对 象 : 
> db.articles.find() 
命令 行将 会 有 如 下 的 输出 : 


人 





ObjectId("52d02240e4b01d67d71ad 


大 功 告 成 ! 这 表明 MongoDB 实 例 已 经 正常 运行 ， 


交互 。 在 后 面 的 章节 中 ， 将 会 进一步 介绍 Mongo 





1.5 安装 Node.js 





安装 Nodejs 稳 定 版 本 最 简单 的 办 法 也 是 使 有 


577"), title: 


并 且 成 功 地 通过 MongoDB 命 令 行 工 具 与 之 
DB 及 MongoDB 命 令 行 工 具 的 使 用 。 


"Hello World " } 
































日 二 进 制 文件 ，Node.js 官 方 网 站 上 提供 了 下 载 地 





址 ,可 用 于 Linux、Mac OSX 和 Windows 系 统 。 同 样 要 注意 下 载 与 目标 操作 系统 架构 一 致 的 文件 。 








灵 社 区 会 员 打 顺 顺 (Ivshun@live. 
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如 果 你 使 用 的 是 Windows 和 Linux， 则 要 注意 对 32 位 和 64 位 版 本 的 选择 。 基 于 安全 的 考虑 ，Mac 
用 户 应 选择 64 位 版 为 宜 。 


Node.js 的 版 本 号 模式 与 MongoDB 一 致 ， 版 本 号 为 偶数 的 是 稳定 版 ， 如 0.8.x 
和 0.10x 都 是 稳定 的 ,而 0.9.x 和 0.11.x 则 不 应 用 于 生产 环境 。 目前 最 新 的 稳定 版 是 
0.10.x。 


1.5.1 在 Windows 上 安装 Node.js 


在 Windows 上 安装 Node.js 是 项 很 简单 的 任务 ,使 用 一 个 单独 的 安装 程序 即 可 完成 。 第 一 步 ， 
在 http:/nodejs.org/download/ 上 下 载 正确 的 ,msi 文件 ,注意 有 32 位 和 64 位 版 本 的 区 分 ， 下 载 时 选择 
与 操作 系统 架构 相应 的 版 本 。 


运行 下 载 的 安装 程序 ， 如 果 弹 出 了 安全 警告 窗口 ， 点 击 运行 (Run ) 即 可 启动 安装 向 导 ， 接 
着 与 下 图 类 似 的 安装 界面 将 会 出 现 : 

















| Welcome to the Node.js Setup Wizard | 


The Setup Wizard allows you to change the way Node.js 
features are installed on your computer or to remove it from 
your computer. Click Next to continue or Cancel to exit the 
Setup Wizard. 











Windows 中 的 Node.js 安 装 向 导 


点 击 Next 即 可 开始 安装 。 片 刻 之 后 ， 与 下 图 类 似 的 安装 成 功 提示 将 会 出 现 。 
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Completed the Node.js Setup Wizard 


Click the Finish button to exit the Setup Wizard. 


Node.js has been successfully installed. 





Windows 中 的 Node.js 安 装 成 功 确认 


1.5.2 在 Mac OS X 上 安装 Node.js 


在 Mac OSX 上 使 用 一 个 单独 的 安装 程序 即 可 简便 完成 Node.js 的 安装 。 用 于 安装 的 .pkg 文 件 可 
在 http:/nodejs.org/download/ 上 下 载 。 


下 载 完 成 后 ， 运 行 安装 程序 即 可 看 到 与 下 图 类 似 的 安装 界面 : 








O00 winalNode | 
Welcome to the Node Installer 
This package will install node and npm into /usr/local/bin 
© Introduction 
® License 
®@ Destination Select 
© installation Type 
©@ Installation 


@ Summary 


” 
冯 
bd 





Co Back Continue 











Mac OS X 上 Node,js 安 装 向 导 
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点 击 Continue 即 可 开始 安装 。 安 装 程序 需要 你 确认 许可 证 协议 和 选择 目标 文件 夹 。 选 择 最 佳 
选项 之 后 再 次 点 击 Continue 按 钮 ， 安 装 程序 需要 你 确认 安装 信息 ， 并 要 求 你 输入 系统 用 户 密码 。 
片刻 之 后 ， 与 下 图 类 似 的 界面 将 会 出 现 ， 提 示 你 Nodejs 安 装 成 功 。 








有 


全 全 日 i Install Node 
The installation was completed successfully. 


Node was installed at 


© Introduction 
SS Lioumnaa /usr/local/bin/node 
9 Destination Select npm was installed at 


© Installation Type fusr/local/bin/npm 


© Installation 
Make sure that /usr/local/bin is in your SPATH. 
9 Summary 


人 


Close 











Mac OS X 上 Nodejs 安 装 成 功 确认 


1.5.3 ”在 Linux 上 安装 Node.js 


在 Linux 上 安装 Node.js， 需 要 在 官网 上 下 载 tarball 包 文件 。 最 好 的 办 法 是 下 载 最 新 的 源 代码 ， 
然后 编译 并 生成 安装 文件 再 安装 。 先 到 http://nodejs.org/download/ 下 载 .tar.gz 文 件 ， 使 用 如 下 命令 
对 文件 进行 解压 并 安装 : 




















$ tar -ZXxf node-v0.10.31.tar.gz 

$ cd node-v0.10.31 

$ ./configure && make && sudo make install 

如 果 一 切 正 常 ，Node.js 即 安装 完成 。 注 意 上 述 命令 是 用 于 0.10.31 这 个 版 本 的 。 请 注意 在 运行 
该 命令 之 前 将 此 数字 替换 为 你 所 下 载 的 版 本 的 版 本 号 。 对 于 安装 中 遇 到 的 任何 问题 ， 可 以 查阅 
Node.js 团 队 创 建 的 安装 选项 文档 ， 地 址 是 : https://github.com/joyent/node/wiki/installation。 





























| 你 可 以 通过 访问 https://nodejs.org 上 的 官方 文档 了 解 更 多 关于 Node.js 的 信息 。 


1.5.4 ”运行 Node.js 








安装 完成 后 , 可 以 通过 Node.js 提 供 的 命令 行 界 面 ( Commond-Line Interface, CLI ) 使 用 Node.js。 
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在 命令 行 工具 中 执行 如 下 命令 : | 


$ node 


这 便 可 启动 Node.js 的 命令 行 界面 ， 它 可 以 接收 JavaScript 语 句 的 输入 。 测 试 安装 是 否 成 功 ， 
运行 如 下 命令 : 
> console.log('Node is up and running!'); 


Node is up and running! 
undefined 


执行 成 功 ! 不 过 最 好 再 试 试 JavaScript 文 件 的 执行 。 创 建 一 个 名 为 applicationjs 的 文件 ， 然 后 
在 文件 中 输入 如 下 代码 : 


console.log('Node is up and running!'); 


执行 如 下 命令 将 上 述 文件 名 设置 为 Node 命 令 行 界面 的 第 一 个 参数 ， 即 可 运行 该 文件 : 


























$ node application.js 
Node is up and running! 


执行 完成 ! 你 的 第 一 个 Nodejs 应 用 创建 成 功 ,使 用 CTRL+D 或 者 CTRL+C 退 出 Node 命 令 行 界面 。 
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Node 只 是 一 个 平台 ， 它 的 功能 和 API 将 只 是 一 个 最 小 集 。 想 获得 更 多 的 功能 ， 可 以 使 用 模块 
系统 来 扩展 平台 。 安 装 、 更 新 和 删除 Node.js 模 块 最 好 的 方法 是 使 用 NPM 工 具 。NPM 有 如 下 两 个 
主要 特性 : 

口 作为 包 注 册 登 记 中 心 ， 用 于 第 三 方 模块 的 查阅 、 下 载 和 安装 ; 
口 作为 命令 行 界面 ， 用 于 管理 项 目 或 系统 全 局 的 包 。 


通常 情况 下 ， 安 装 Node.js 时 即 一 并 安装 了 NPM， 我 们 就 直接 开始 用 它 吧 。 









































NPM 使 用 


为 了 理解 NPM 是 如 何 工 作 的 ， 可 以 先 试 着 安装 一 下 后 面 的 章节 将 会 用 到 的 Express 这 个 Web 
框架 。NPM 是 一 个 稳健 的 包 管 理 器 ， 它 集中 注册 了 公开 的 模块 。 你 可 以 通过 访问 官方 网 站 
https://npmjs.org/ 浏 览 所 有 可 用 的 公开 包 。 

大 多 数 注册 到 登记 中 心 的 包 都 是 开源 的 , 由 Node.js 社 区 开发 人 员 提 供 。 在 开发 一 个 开源 的 模 
块 时 , 包 的 作者 可 以 决定 是 否 将 其 发 布 到 集中 注册 登记 中 心 ,以便 让 其 他 开发 人 员 下 载 并 用 于 各 
自 的 项 目 中 。 在 包 配 置 文件 中 ， 包 作者 会 选择 一 个 唯一 标示 符 作 为 包 的 名 字 ， 以 用 于 包 的 下 载 。 















































用 
车 
| 
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| 你 可 以 通过 访问 https://npmjs.org 上 的 官方 文档 了 解 更 多 关于 Node.js 的 信息 | 


1. NPM 的 安装 过 程 


务必 注意 , NPM 有 两 种 安装 模式 : 本 地 和 全 局 。 常规 的 做 法 是 将 2 
应 用 目录 下 的 node_modules 文 件 夹 中 , 这 也 是 NPM 默 认 的 安装 模式 。 它 不 会 影响 到 系统 全 局 , 更 
不 会 增加 一 些 不 必要 的 全 局 文件 而 污染 系统 。 


全 局 模式 用 来 安装 需要 作为 全 局 使 用 的 Node,js 的 安装 包 。 通 常 这 些 包 都 是 一 些 命令 行 工具 ， 
比如 后 面 的 章节 将 会 涉及 的 Grunt。 通 常情 况 下 ， 这 些 包 的 作者 会 给 出 明确 提示 ， 这 些 包 需要 全 
局 安装 。 因 此 ， 当 无 法 确认 使 用 哪 种 安装 模式 时 ， 就 选择 本 地 模式 。 全 局 模式 安装 的 模块 可 以 用 
于 本 系统 中 所 有 Node.js 应 用 , 类 Unix 系 统 中 的 安装 路 径 一 般 为 /asrlocalMlibmode modules, Windows 
中 的 一 般 为 C:\Users\%USERNAME%\AppData\Roamingenmpmnode modules。 






























































(1) 使 用 NPM 安 装 包 


找到 需要 安装 的 安装 包 之 后 ， 可 以 使 用 如 下 命令 来 安装 : 








$ npm install <Package Unique Name> 
全 局 安装 模式 与 本 地 安装 模式 类 似 ， 只 需要 加 一 个 -g 参 数 : 


$ npm install -g <Package Unique Name> 


如 果 当 前 用 户 没 有 权限 进行 全 局 模式 安装 , 使 用 root 用 户 或 者 sudo 进 行 安装 
即 可 。 


例如 ， 我 们 想 在 本 地 安装 Express， 首 先进 入 应 用 所 在 目录 ， 然 后 执行 如 下 命令 
$ npm install express 


上 述 命令 将 在 本 地 的 node modules 目 录 中 安装 Express 的 最 新 稳定 版 。 此 外 , NPM 还 支持 多 种 
语义 的 版 本 号 ， 在 安装 某 一 指定 版 本 时 ， 如 下 所 示 运 行 npm 命 令 进 行 安装 : 


$ npm install <Package Unique Name>@<Package Version> 
例如 ， 要 安装 Express 的 第 二 个 大 版 本 ， 可 以 使 用 如 下 命令 : 
$ npm install express@2.x 


这 样 便 可 安装 Express 2 的 最 新 稳定 版 。 上 述 命 令 格式 支持 NPM 下 载 并 安装 Express 2 的 任意 次 要 
版 本 。 想 要 了 解 更 多 关于 所 支持 的 语义 版 本 语法 的 信息 , 请 访问 https://github.conmyisaacs/node-semver。 
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如 果 需 要 安装 的 包 存 在 依赖 软件 包 , NPM 会 自动 安装 其 所 依赖 的 包 , 并 在 包 的 文件 夹 内 创建 
node modules ， 用 以 存储 依赖 包 。 在 上 述 例子 中 ，Express 的 依赖 包 将 会 安装 到 node_ modules/ 


expressmnode modules 中 。 








(2) 使 用 NPM 删 除 包 
要 删除 所 安装 的 包 ， 首 先进 入 应 用 所 在 文件 夹 ， 并 执行 如 下 命令 即 可 : 
$ npm uninstall < Package Unique Name> 


NPM 会 根据 指定 的 安装 包 名 称 查找 包 ， 找 到 之 后 可 以 从 本 地 的 node_nodules 目 录 中 删除 它 。 
要 想 删除 一 个 全 局 包 ， 增 加 一 个 -g 参 数 即 可 ， 如 下 所 示 : 


$ npm uninstall -g < Package Unique Name> 
(3) 使 用 NPM 更 新 包 
想 要 将 包 更 新 到 最 新 版 ， 执 行 如 下 命令 : 


$ npm update < Package Unique Name> 


不 管 本 地 是 否 存在 这 个 包 ,NPM 都 会 去 下 载 和 安装 该 指定 包 的 最 新 版 ,要 想 更 新 一 个 全 局 包 ， 
执行 如 下 命令 : 


$ npm update -g < Package Unique Name> 


2. 使 用 package.json 管 理 依赖 


安装 一 个 包 很 简单 ,但 很 快 , 你 的 应 用 会 需要 用 到 一 些 依赖 包 , 这 时 就 需要 一 个 更 好 的 方法 
管理 这 些 依赖 包 。 基于 这 一 目的 , NPM 支 持 通过 使 用 配置 文件 来 定义 应 用 的 各 个 元 数据 属性 ,如 
应 用 的 名 称 、 版 本 、 作 者 名 字 等 。 该 配置 文件 名 为 package.json， 存 储 于 应 用 根 目 录 下 。 除 自 定 
义 的 应 用 外 ， 它 还 可 以 用 来 自 定 义 应 用 的 依赖 。 


package.json 文 件 是 一 个 JSON 文 件 ， 应 用 的 属性 以 键 值 的 方式 存储 在 其 中 。 
一 个 使 用 Express 和 Grunt 最 新 版 的 应 用 的 package.json 是 这 样 定 义 的 : 


t 
"name" : "MEAN", 
"version" : "0.0.1", 
"dependencies" : { 
"express" : "latest", 
"grunt" : "latest" 


} 



























































} 
| 全 应 用 的 名 字 和 版 本 号 是 必 填 项 ， 去 掉 这 两 个 属性 将 会 影响 到 NPM 的 使 用 。 ] 
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(1) 创建 package.json 文 件 





除了 手动 创建 packagejson 文 件 ， 还 有 一 种 更 简单 的 方法 ， 那 就 是 使 用 npm init 命 令 。 在 命 

















令 行 工具 中 输入 如 下 命令 : 








$ npm init 


NPM 会 提出 一 些 关于 应 用 的 问题 ， 并 自动 创建 一 个 新 的 package.json 文 件 。 示 例 创 建 过 程 类 


似 于 下 图 所 示 : 


A mean 一 bash 一 80x43 
Amoss-MacBook-Pro:mean AnosS npm init 


This utility will wolk you through creoting a packoge.json file. 
It only covers the most common items, ond tries to guess sone defoults. 


See ‘npm help json for definitive documentation on these fields 
ond exoctly what they do 


Use ‘npm install <pkg> -~-save™ afterwards to install a packoge and 
save 让 as a dependency in the pockoge.json file. 


Press AC ot Ony ttae to quit。 

name: (meon) MEAN 

version: (0.0.0) 9.0.1 

description: My First MEAN Application 

entry point: (Cindex.js) Server .js 

test comond: 

git repository: 

keywords: MongoD8, Express, Angular]S, Node.js 
outhor: Amos Haviv 

license: CISC) NIT 

About to write to /Users/Amos/Projects/SportsTopNews/mean/packoge .json: 


{ 
"name™: "MEAN", 
"version": "0.0.1", 
"description": First MEAN Application", 
"matn": "server.js”, 
"scripts": { 
"test": “echo \“Error: no test specified\" B88 exit 1" 


"Express”, 
"Angularjs”", 
"Node.js” 
]， 
”author": “Amos Havitv”， 
"license": "MIT” 
} 


Is this ok? (yes) yes 
Amoss-MacBook-Pro:mean Amoss$ 











在 Mac OS X 中 使 用 NPM init 


上 述 文件 创建 完成 后 ， 可 以 修改 该 文件 并 添加 一 些 相关 的 依赖 属性 。 
式 如 下 : 

















| 


{ 
"name": "MEAN", 
version™ sy "O00. LT. 
"description": "My First MEAN Application", 
"main": "server.js", 
eer TOS 
"test": "echo \"Error: no test specified\" && exit 1" 
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} 
"keywords": |[ 
"MongoDB", 
"Express", 

"AngularJSs", 
"Node.js" 
J]; 
"author": "Amos Haviv", 
WLLCENSe: MIT, 
"dependencies": { 
"express": "latest", 
qedurnt "i Iategt" 
} 
} 


上 述 示例 代码 中 使 用 了 latest 作 为 关键 字 ， 以便 NPM 能 够 安装 这 些 包 的 最 

新 版 。 但 是 ,为 避免 在 开发 周期 内 应 用 依赖 包 不 断 发 生 交 化 , 我 们 强烈 建议 你 指 

一 定 一 个 具体 的 版 本 号 或 者 版 本 号 范围 ,原因 在 于 一 些 包 的 新 版 本 并 不 一 定 会 向 前 
兼容 旧版 本 ， 这 将 会 给 你 的 应 用 带 来 极 大 的 影响 。 


(2) 安装 package.json 中 的 依赖 


创建 完 package.json 文 件 后 ， 就 可 以 用 它 来 安装 应 用 的 依赖 了 。 进 入 应 用 的 根 目录 ， 在 命令 
行 中 执行 npm install 命 令 ， 如 下 所 示 : 

$ npm install 

NPM 会 自动 检测 到 已 存在 的 package.json 文 件 ， 并 根据 该 文件 中 的 配置 将 应 用 的 依赖 安装 到 
本 地 的 node_modules 文 件 夹 中 。 另 外 一 个 安装 应 用 依赖 的 方法 是 使 用 npm upaate 命 令 ， 而 且 在 
某 些 情况 下 ， 这 种 方法 更 为 简便 。 如 下 所 示 : 




















$ npm update 


这 样 既 可 保证 所 有 的 包 都 会 被 安装 ,又 能 将 已 安装 的 包 更 新 到 其 指定 的 版 本 (或 版 本 范围 )。 











(3) 更 新 package.json 文 件 

npm install 命 令 还 有 一 个 强大 的 功能 ， 那 就 是 在 安装 包 的 同时 ， 将 包 的 信息 保存 到 
package.json 的 依赖 关系 中 。 只 需要 在 安装 包 的 时 候 加 上 --save 参 数 即 可 。 例 如 ， 要 安装 最 新 版 
的 Express 并 将 其 加 入 到 依赖 关系 中 ， 执 行 如 下 命令 即 可 : 














$ npm install express --save 


NPM 将 安装 最 新 版 的 Express， 并 在 package.json 中 添加 对 Express 的 依赖 。 在 后 面 的 章节 中 ， 
为 了 便于 理解 ， 我 们 将 手动 编辑 package.json 文 件 。 但 这 一 特性 在 日 常 开 发 中 是 有 效 的 。 
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关于 更 多 NPM 配 置 文件 相关 选项 的 说 明 ， 请 参见 https://npmjs.org/doc/json. 
html 上 的 官方 文档 。 


1.7 总 结 








本 章 中 ， 你 学 到 了 如 何 安装 MongoDB 及 使 用 命令 行 工具 连接 本 地 的 数据 库 实 例 。 也 学 到 了 
如 何 安装 Nodejs 以 及 使 用 Node.js 命 令 行 工 具 。 还 了 解 了 NPM， 以 及 如 何 使 用 NPM 下 载 和 安装 
Node.js 包 ， 如 何 使 用 package.json 文 件 轻松 地 管理 应 用 的 依赖 。 下 一 章 中 ， 我 们 将 讨论 Node.js 基 
础 知识 ， 以 及 如 何 创 建 Nodejs Web 应 用 。 
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上 一 章 介绍 了 如 何 配 置 你 的 开发 环境 , 并 讨论 了 一 些 基 本 的 Node.js 开 发 原则 。 本章 将 介绍 怎 
样 创 建 Node.js Web 应 用 。 你 将 会 了 解 到 JavaScript 的 基本 特性 一 一 事件 驱动 ， 以 及 如 何 运 用 这 一 
特性 来 搭建 Nodejs 应 用 。 你 还 将 了 解 到 Node.js 的 模块 系统 , 以 及 如 何 创 建 你 的 第 一 个 Nodejs Web 
应 用 。 接 下 来 还 会 学 习 Connect 模 块 以 及 它 强 大 的 中 间 件 方法 。 学 完 本 章 ， 你 将 知道 如 何 利 用 
Connect 和 Node.js 创 建 简单 而 强 有 力 的 Web 应 用 。 本 章 主 要 包含 如 下 几 个 主题 : 

口 Node.js 简 介 

口 JavaScript 的 闭 包 和 事件 驱动 编程 
口 Node.js 事 件 驱 动 Web 开 发 

口 CommonJS 模 块 和 Node.js 模 块 系统 
口 Connect Web 框 架 简 介 


口 Connect 的 中 间 件 模式 























2.1 ”Node.js 简介 


在 2009 年 JSConf 的 欧洲 分 会 上 ，Ryan Dahl 上 台 介 绍 了 他 的 Node.js 项 目 。 自 2008 年 起 ，Dahl 
开始 关注 当时 的 Web 潮 流 并 发 现 了 Web 应 用 运作 中 的 奇怪 之 处 。 几 年 前 面世 的 AJAX 将 静态 网 站 
转化 为 动态 Web 应 用 , 但 Web 开 发 的 基本 构件 并 没有 与 时 俱 进 。 其 问题 在 于 当时 的 Web 技 术 并 不 
支持 浏览 器 和 服务 器 之 间 的 双向 通信 。 其 中 ，Flickr 的 文件 上 件 系 统 就 是 一 个 典型 的 例子 。 由 于 
服务 器 无 法 获取 所 要 上 传 的 文件 的 具体 情况 ， 导 致 浏览 器 无 法 将 这 一 上 传 过 程 在 进度 条 上 显示 
出 来 。 


Dah]l 的 想法 是 创建 出 一 个 能 够 支持 从 服务 器 到 浏览 器 进行 数据 推送 的 Web 平 台 ， 然 而 这 一 想 
法 实施 起 来 并 不 简单 。 在 常规 的 Web 应 用 中 ，Web 平 台 需 要 支持 成 百 乃 至 上 千 服 务 器 到 浏览 央 间 
的 持续 性 连接 。 大 多 数 平台 都 通过 使 用 开销 高 昂 的 线程 来 处 理 请 求 。 这 意味 着 为 了 保持 连接 , 一 
大 堆 空 闲 线程 将 会 被 打开 。 对 此 Dahl 男 以 踩 径 。 他 发 现 使 用 非 阻 塞 的 socket 将 会 节省 大 量 的 系统 
资源 , 甚至 还 证 明了 这 一 技术 通过 C 语 言 就 可 以 实现 。 但 是 鉴于 该 技术 可 以 使 用 多 种 语言 来 实现 ， 
同时 Dahl 认 为 用 C 语 言 来 进行 非 阻 塞 编 程 既 兄 长 又 乏味 ,于 是 他 决定 寻找 一 种 更 合适 的 编程 语言 。 
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Google 在 2008 年 年 底 发 布 了 Chrome 和 新 的 V8 JavaScript3| 擎 。 显 而 易 见 ，JavaScript 的 运行 速 
度 较 之 从 前 有 了 很 大 的 提升 。 相 比 其 他 JavaScript 引 警 ，V8 最 大 的 优点 在 于 ， 在 执行 JavaScript 代 
人 码 之 前 ，V8 会 将 其 编译 成 本 地 代码 。 再 加 上 其 他 方面 的 优化 性 ，JavaScript 成 为 深 具 执 行 复杂 任 
务 可 行 性 的 编程 语言 。 Dahl 意 识 到 了 这 一 点 , 并 决定 做 一 个 新 的 尝试 一 一 在 JavaScript 中 运用 非 阻 
塞 socket。 他 将 V8 引 警 用 C 代 码 封 装 起 来 ， 创 建 了 Nodejs 的 第 一 个 版 本 。 


在 获得 开发 社区 的 强烈 反响 之 后 ，Dahl 开 始 扩展 Node 核 心 。V8 引 擎 最 初 的 设计 并 不 是 用 在 
服务 器 环境 中 的 ， 因 此 Nodejs 需 要 对 其 进行 扩展 ， 以 便 让 它 能 够 更 好 地 适应 服务 器 环境 。 比 如 ， 
浏览 器 通常 不 需要 访问 文件 系统 ， 但 在 服务 器 中 这 却 是 必 备 的 功能 。 最 终 ，Nodejs 不 仅 成 为 了 
Javascript 执 行 引擎 ， 它 还 成 为 一 个 可 以 运行 编码 简单 、 性 能 高 效 、 扩 展 简易 的 复杂 JavaScript 应 
用 平台 。 

























































































2.1.1 _ JavaScript 事件 驱 动 编程 


Node.js 利 用 JavaScript 的 事件 驱动 特性 来 支持 平台 中 的 非 阻 塞 操作 ， 这 使 得 平台 具有 了 超凡 
的 性 能 。JavaScript 是 一 种 事件 驱动 的 语言 , 这 意味 着 如 果 为 某 一 特定 事件 进行 代码 注册 ， 当 事件 
触发 时 ， 代 码 便 会 执行 。 这 一 理念 支持 无 颖 运行 异步 代码 ， 同 时 不 会 阻塞 程序 其 他 部 分 的 运行 。 


为 了 更 好 地 理解 这 一 点 ， 我 们 先 来 看 看 下 面 这 段 Java 代 码 : 



























































System.out .brint("NWhat is your name?"); 
String name = System.console() .readLine(); 
System.out.print ("Your name is: " + name); 


上 述 例子 中 , 程序 会 先 执行 第 一 行 和 第 二 行 ， 然 后 停 下 , 在 用 户 输入 名 字 之 后 继续 执行 第 三 
行 。 这 就 是 同步 编程 ， LO 操作 会 阻塞 程序 其 余部 分 的 运行 。 但 是 ，JavaScript 并 不 是 这 样 运行 的 。 

JavaScript 自 设计 之 初 是 为 了 支持 浏览 器 操作 ， 因 此 它 是 基于 浏览 器 事件 的 。 其 实在 很 久 前 
JavaScript 就 完成 了 这 一 巨大 的 进步 ， 即 允许 浏览 器 将 HITML 的 用 户 事件 委托 给 相应 的 JavaScript 
代码 。 请 看 下 面 这 段 HTML 代 码 : 





















































<span>What is your name?</span> 

<input type="text" id="nameInput"> 

<input type="button" id="showNameButton" value="Show Name"> 
<script type="text/javascript"> 

Var ShowNameButton = document .getElementById('showNameButton'); 


showNameButton.addEventListener('click', function() { 
alert (document .getElementById('nameInput') .value); 

}); 

// 其 他 代码 


</script> 


上 述 代码 示例 中 , 一 个 文本 框 和 一 个 按钮 将 被 创建 出 来 。 当 按钮 被 按 下 时 , 会 弹出 一 个 包含 
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文本 框 内 文字 的 警告 ， 用 以 监控 addEventLister () 方 法 这 一 主要 功能 。 该 方法 包含 两 个 参数 ， 
个 是 事件 名 字 , 一 个 是 在 事件 触发 时 执行 的 匿名 函数 。 第 二 个 参数 通常 被 称 为 回调 函数 。 注 意 ， 

不 管 我 们 在 回调 函数 中 写 了 什么 代码 ，aqdgventListener () 方 法 之 后 的 代码 都 会 直接 执行 ， 

而 不 用 等 回调 函数 执行 完毕 。 


上 述 示例 阐明 了 JavaScript 是 如 何 通 过 事件 来 执行 指令 集 的 。 因 为 浏览 器 是 单线 程 的 , 所 以 如 
果 使 用 同步 编程 来 实现 这 个 例子 ,页 面 里 的 其 他 部 分 将 会 僵 死 ， 从 而 导致 网 页 反应 迟钝 ， 损 害 用 
户 网 络 体验 。 值 得 庆幸 的 是 ，JavaScript 并 不 是 这 样 运作 的 。 浏 览 咒 使 用 内 循环 (innerloop )， 通 
常 称 之 为 事件 轮 询 ( event loop )， 操 控 线 程 来 执行 整个 JavaScript 代 码 。 事 件 轮 询 是 一 个 由 浏览 器 
无 限期 运行 的 单线 程 循环 。 每 当 触 发 一 个 事件 ,浏览 器 就 将 其 加 到 事件 队列 。 事 件 轮 询 接着 从 寻 
件 队列 中 取出 下 一 个 事件 , 执行 事件 注册 对 应 的 处 理 函 数 。 事件 轮 询 执 行 完 所 有 人 处理 函数 , 便 继 
续 处 理 下 一 事件 ， 如 此 往复 ,不断 推 进 。 下 图 将 这 一 过 程 进行 了 图 形 化 : 
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浏览 器 执行 的 通常 都 是 用 户 触发 的 事件 〈 如 单 击 按钮 )， 而 Nodejs 则 执行 着 不 同 来 源 的 各 类 
事件 。 
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2.1.2 ”Node.js 事 件 驱动 编程 


在 开发 服务 器 逻辑 时 , 你 可 能 会 注意 到 , 大 部 分 的 系统 资源 会 浪费 在 阻塞 代码 上 。 举 个 例子 ， 
请 看 下 面 这 段 PHP 的 数据 库 操作 代码 : 


Soutput = mysql_query ('SELECT * FROM Users'); 
echo ($output); 


服务 器 将 会 查询 数据 库 并 执行 select 语 句 ， 然 后 将 结果 返回 给 PHP 程 序 ， 并 最 终 将 数据 作 
为 响应 输出 。 上 述 代码 从 数据 库 获 取 到 输出 结果 之 前 ， 会 阻塞 所 有 其 他 操作 的 执行 。 换 言 之 ， 
该 进程 (通常 情况 下 是 线程 ) 在 等 待 其 他 进程 执行 结束 的 过 程 中 会 一 直 闲 置 ， 但 却 要 消耗 系统 
的 资源 。 


为 了 解决 这 个 问题 ， 许 多 Web 平 台 利 用 线程 池 系统 来 解决 连接 线程 占用 问题 。 这 种 多 线程 技 
术 非 常 直 观 , 但 同时 又 有 如 下 几 个 严重 不 足 : 


口 管理 线程 将 成 为 一 项 复杂 的 工作 
口 系统 资源 被 闲置 线程 占用 
口 这 种 应 用 不 易于 扩展 


这 种 方法 在 不 要 求 服 务 器 和 浏览 器 双向 通信 的 时 候 是 可 行 的 。 浏 览 器 发 起 一 个 短 连 接 请 求 ， 
由 服务 器 的 响应 结束 连接 。 但 如 果 要 开发 一 个 长 期 连接 浏览 器 和 服务 器 的 实时 应 用 呢 ? 了 解 这 一 
想法 在 实际 应 用 中 的 情况 ， 你 可 以 参照 下 图 所 列举 的 Apache( 阻塞 式 Web 服 务 器 ) 与 Nginx ( 非 
阻塞 式 事件 轮 询 ) 之 间 的 并 发 请 求 处 理性 能 对 比 。 详 情 请 查阅 http://blog.webfaction.com/2008/ 
12/alittle-holiday-present-10000-reqssec-with-nginx-2/。 































































































车 箭 请 求 
言 号 数量 nginx 


10000 apache 





8000 


6000 


4000 


2000 











500 1000 1500 2000 2500 3000 3500 并 发 连接 数 











Apache 和 Nginx 的 并 发 处 理性 能 对 比 


上 图 可 以 看 出 ，Apache 请 求 响应 性 能 的 降低 速度 明显 快 于 Nginx。 但 接 下 来 这 张 二 者 内 存 消 
耗 的 对 比 图 中 ， 你 将 看 到 Nginx 的 事件 轮 询 架构 对 服务 器 内 存 消耗 的 巨大 影响 。 
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Apache 和 Nginx 处 理 并 发 请 求 时 的 内 存 占 用 对 比 


从 上 面 的 对 比 中 ,可 以 得 出 这 样 一 个 结论 : 使 用 事件 驱动 架构 可 以 有 效 降 低 服 务 器 负载 ， 而 
在 开发 Web 应 用 时 利用 JavaScript 异 步 的 理念 则 可 达到 立 杆 见 影 的 效果 。 而 使 这 一 方法 具有 可 行 性 
的 ， 则 是 被 JavaScript 开 发 人 员 称 为 闭 包 的 简单 设计 模式 。 


2.2 JavaScript 闭 包 


闭 包 是 赋 给 其 父 环境 中 某 个 变量 的 函数 。 使 用 闭 包 模 式 , 父 函 数 中 的 变量 作用 域 将 会 延伸 绑 
定 到 闭 包 函 数 。 如 下 所 示 : 








function parent() { 
Var message = "Hello Worild"; 


function child() { 
alert (message); 


} 


child(); 
} 


parent () ; 


上 述 例子 可 以 看 出 ，chila() 函数 中 依然 可 以 访问 parent () 内 定义 的 变量 。 这 个 例子 比较 
简单 ， 下 面 让 我 们 看 看 这 段 更 有 趣 的 代码 : 


function parent() { 
Var message = 'Hello World'; 


FUmet lon .eid() 


alert (message); 


} 
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return chilg; 


} 


var childFN = parent() 
childFN(); 


这 次 就 不 一 样 了 ，parent () 函数 直接 返回 了 child() 困 数 ， 在 parent () 执行 完成 之 后 ， 
chila() 函数 依然 可 以 继续 调用 。 对 于 有 些 开发 人 员 来 讲 , 这 点 可 能 有 点 不 合乎 自己 既往 的 编程 
经 验 ， 作 为 parent () 的 局 部 变量 不 是 只 有 在 它 执行 的 时 候 才 存在 吗 ? 而 这 一 特性 就 是 闭 包 的 精 
粹 所 在 。 闭 包 绝 不 是 普通 的 函数 , 它 还 包含 了 函数 创建 环境 。 上述 示例 中 ，chi1ldFN () 就 是 一 个 
闭 包 对 象 ， 该 对 象 既 包含 chi la ( ) 函数 ， 还 包括 创建 该 函数 时 的 环境 变量 ， 比 如 message 变 量 。 


闭 包 在 异步 编程 中 至 关 重 要 ， 因 为 JavaScript 函 数 是 可 以 作为 参数 传递 给 其 他 函数 的 一 类 对 
象 . 这 表明 , 你 可 以 创建 一 个 回调 函数 , 并 将 其 作为 参数 传 给 事件 处 理 程序 。 当 事件 触发 的 时 候 ， 
回调 函数 就 会 被 调用 , 就 算 创 建 回调 函数 的 父 函 数 已 经 执行 完毕 , 回调 函数 依然 可 以 操作 父 环境 
中 的 任 一 变量 。 因 此 ， 当 你 在 进行 事件 驱动 开发 时 ,就 不 需要 将 作用 域内 所 有 的 状态 都 传 给 事件 
处 理 程序 。 

































































2.3 Node 模块 


一 些 独一无二 的 特性 使 得 JavaScript 成 为 一 个 即 保 持 了 高 性 能 又 不 失 可 维护 性 的 强大 程序 设 
计 语 言 。 实 践 应 用 证 明 闭 包 和 事件 驱动 是 非常 行 之 有 效 的 。 但 是 像 其 他 所 有 的 编程 语言 一 样 ， 
JavaScript 也 是 不 尽 完美 的 ， 它 最 主要 的 设计 缺陷 在 于 ， 共 用 一 个 全 局 命名 空间 。 


让 我 们 从 JavaScript 的 起 源 一 一 浏览 器 ,来 分 析 一 下 这 个 问题 存在 的 原因 。 在 浏览 器 里 , 在 页 
面 中 加 载 一 个 脚本 , 引 苟 将 会 把 代码 注入 到 一 个 所 有 脚本 共享 的 地 址 空间 中 , 这 意味 着 如 果 你 在 
一 个 脚本 中 为 某 个 变量 赋值 , 先前 脚本 中 已 定义 的 同名 变量 将 会 被 覆盖 。 这 在 小 规模 的 程序 中 没 
什么 问题 , 但 在 大 型 的 应 用 中 却 容易 出 现 冲 突 , 而 且 错 误 也 变 得 难以 追踪 。 这 是 Node.js 演 变 为 一 
个 平台 的 重要 障碍 。 好 在 CommonJS 的 模块 标准 为 这 一 问题 提供 了 解决 方案 。 
2.3.1 CommonJS 模 块 加 


CommonJS 始 于 2009 年 ， 旨 在 将 运行 在 浏览 器 之 外 的 JavaScript 进 行 标准 化 。 自 诞生 以 来 ， 
CommonJS 已 经 解决 了 大 量 的 JavaScript 问 题 , 其 中 包括 通过 对 编写 以 及 包含 独立 JavaScript 模 块 进 
行规 范 而 解决 的 全 局 命名 空间 问题 。 


CommonJS 模 块 指定 了 如 下 几 个 在 模块 中 会 用 到 的 关键 组 件 。 


D require(): 用 来 将 模块 加 入 到 应 用 中 。 
口 exports: 这 个 对 象 在 每 个 模块 中 都 有 ， 当 模块 加 载 后 , 它 可 以 提供 对 某 一 段 代码 的 访问 。 
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D module; 这 个 对 象 原本 是 用 于 提供 模块 中 的 元 数据 信息 ， 它 还 包含 一 个 指向 exports 对 
象 指针 的 属性 。 不 过 在 常规 应 用 中 ，exports 对 象 多 被 用 作 独 立 对 象 ， 使 得 moaule 的 应 
用 场景 也 随 之 变化 。 
Node 对 CommonJS 模 块 的 实现 中 , 每 个 模块 都 会 被 写 进 一 个 单独 的 JavaScript 文 件 中 ,而 且 每 民 
个 模块 都 有 其 独立 的 作用 域 来 容纳 他 们 所 有 的 变量 。 模 块 开发 人 员 可 以 将 模块 内 的 功能 
exports 对 象 进行 展示 。 为 了 更 好 地 理解 , 请 参看 下 面 所 举 的 例子 。 创 建 一 个 hellojs 文 件 ,输入 
如 下 代码 : 


Var message = 'Hello'; 























exports.sayHello = function(){ 
console.log (message); 


} 
再 创建 一 个 名 为 serverjs 的 应 用 程序 文件 ， 输 入 如 下 代码 : 


Var hello = require('./hello'); 
hello.sayHello(); 


上 述 例子 中 ， 一 个 名 为 hello 的 模块 被 创建 出 来 。 该 模块 中 包含 一 个 名 ee 
该 变量 独立 于 hel1lo 模 块 ， 整 个 模块 只 有 sayHello () 方 法 可 以 作为 exports 对 象 的 属性 暴露 
用 户 。serverjs 应 用 程序 文件 使 用 require() 方 法 来 加 载 hello 模 块 ， 
sayHello () 方 法 。 


另 一 种 创建 模块 的 方法 是 利用 module .exports 来 暴露 单个 函数 。 为 了 更 好 地 理解 ， 我 们 
将 修改 上 述 示 例 中 的 hello.js 文 件 ， 如 下 所 示 : 

















modqule .exports = function(){ 
Var message = 'Hello'; 


console.log (message); 


} 
然后 serverjs 中 模块 加 载 方法 也 要 进行 相应 修改 : 


Var hello = require('./hello'); 
hello(); 


经 过 一 番 修 改 , 应 用 程序 文件 server.js 中 可 以 直接 使 用 nel1o 模 块 , 而 不 需要 调用 作为 模块 
性 的 sayHello () 方 法 。 
CommonJS 的 模块 规范 使 Node.js 平 台 可 以 进行 无 限 扩 展 ， 又 不 会 影响 Node 的 核心 模块 。 没有 
它 ，Node.js 平 台 将 会 成 为 一 堆 杂 乱 无 章 的 冲突 。 然 而 ， 并 不 是 所 有 的 模块 都 是 同一 类 ， 在 开发 
Node 应 用 时 ， 通 常会 碰 到 好 几 种 模块 。 





al 
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在 加 载 模块 时 可 以 省 掉 .js 扩 展 名 ，Node 会 先 寻 找 同 名 的 文件 夹 ， 如 果 找 不 
到 ， 则 寻找 同名 的 js 文件 。 


2.3.2 ”Node.js 核 心 模块 


核心 模块 指 的 是 那些 被 编译 进 Node 的 二 进 制 文件 中 的 模块 。 它 们 被 预 置 在 Node 中 ，Node 的 
官方 文档 中 也 对 其 进行 了 详细 的 介绍 。 核心 模块 提供 了 大 多 数 Node 的 基本 功能 , 比如 文件 系统 访 
问 、HTTP 和 HTTPS 接 口 等 。 要 加 载 核心 模块 ， 直 接 在 代码 文件 中 使 用 require () 方 法 即 可 。 下 
面 我 们 来 看 一 个 利用 核心 模块 fs 读 取 系统 hosts 文 件 的 例子 ， 代 码 如 下 : 



































fs = require('fs'); 


fs.readFile('/etc/hosts', 'utf8', function (err, data) { 
if (err) { 
return console.logl(err); 


} 


console.log(data); 


2 


代码 中 包含 fs 模块 时 ，Node 将 自动 在 核心 模块 文件 夹 中 加 载 ， 然 后 就 可 以 使 用 
fs.reaqFile() 读 取 文 件 内 容 ， 并 在 命令 行 输出 中 打印 出 来 。 


| 了 解 更 多 关于 核心 模块 的 信息 ， 请 参阅 http://nodejs.org/api/ 中 的 官方 文档 。 | 


2.3.3 ”Node.js 第 三 方 模块 


在 上 述 章节 中 我 们 已 经 讲述 了 如 何 使 用 NPM 安 装 第 三 方 模块 。NPM 会 将 模块 安装 到 应 用 根 
目录 下 的 node_ modules 文 件 夹 中 ， 然 后 你 就 可 以 像 使 用 核心 模块 一 样 使 用 第 三 方 模块 了 。 在 进行 
模块 加 载 时 , Node 会 先 在 核心 模块 文件 夹 中 进行 搜索 , 然后 再 到 node_modules 文 件 夹 中 的 模块 文 
件 夹 中 查找 。 关 于 如 何 使 用 express 模 块 ， 如 下 所 示 : 


Var express = require('express'); 
Var app = express(); 


Node 会 自动 到 node_modules 文 件 夹 中 找到 express 模 块 并 完成 加 载 , 然后 你 就 可 以 把 它 作为 
一 种 方法 来 生成 express 应 用 对 象 。 
































2.3.4 Node.js 文 件 模块 
上 述 例子 已 经 讲述 了 如 何 使 用 Node 直 接 从 一 个 文件 中 加 载 模块 ,不 过 这 些 例子 只 提供 了 从 当 
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前 目录 获取 模块 文件 的 方法 。 实 际 上 , 我 们 可 以 将 文件 放 在 任何 位 置 ， 只 要 在 加 载 模块 文件 时 加 
上 路 径 即 可 。 回 到 上 述 hellojs 和 serverjs 的 例子 ， 在 这 两 个 文件 所 在 的 目录 中 ， 创 建 一 个 名 为 
modules 的 文件 夹 ， 并 将 hello.js 移 动 到 新 建 的 文件 夹 中 ， 那 么 server.js 就 需要 通过 使 用 一 个 相对 路 
径 来 加 载 hellojs 了 ， 代 码 如 下 : 


























Var hello = require('./modules/hello'); 
当然 ， 也 可 以 使 用 绝对 路 径 : 
Var hello = require('/home/project/frist-example/modules/hello'); 


Node 会 根据 提供 的 路 径 进 行 加 载 。 





2.3.5 ”Node.js 文 件 夹 模块 


虽然 并 不 是 所 有 的 Node 开 发 人 员 都 会 去 编写 第 三 方 的 模块 ,但 是 这 里 还 是 要 讲述 一 下 如 何 从 
文件 夹 中 加 载 模块 。 文 件 夹 模 块 的 加 载 方法 与 文件 模块 是 一 致 的 ， 如 下 所 示 : 












































Var hello = require('./modules/hello'); 


如 果 modules 目 录 下 存在 一 个 名 为 hello 的 文件 来 ，Node 便 会 在 hello 文 件 来 中 搜索 
package.json， 如 果 找 到 了 ，Node 将 尝试 解析 它 ， 并 查找 是 否 存在 一 个 main 属 性 。 比 如 ， 像 下 面 
这 种 格式 的 package.json: 








name 'hello 
OESLorm a Oi0 
"main" : "./hello-module.js" 


Node 将 会 去 加 载 ./hello/hello-module.js 这 个 文件 。 如 果 package.json 文 件 不 存在 ,或 者 没有 定 
义 main 属 性 ，Node 默 认 会 去 加 载 ./hello/index.js 文 件 。 


对 于 编写 复杂 的 JavaScript 应 用 ，Node 的 模块 机 制 的 确 是 一 剂 良 方 。 它 可 以 有 效 地 帮助 开发 
人 员 进 行 代码 组 织 。 同 时 ,使 用 NPM 还 可 以 方便 地 查找 和 安装 由 社区 创造 的 大 量 第 三 方 模块 。 
Ryan Dahl 构 建 一 个 更 为 完美 的 Web 框 架 的 想法 最 终 以 一 个 提供 各 种 解决 方案 的 Nodejs 平 台 告 
终 。 不 过 现在 它 还 只 是 一 个 平台 ， 直 到 express 这 个 第 三 方 模块 的 出 现 ， 一 个 完美 的 Web 框 架 才 
最 终 成 型 。 














2.4 ”Node.js Web 应 用 开发 


Nodejs 作 为 一 个 平台 ， 可 以 用 于 开发 各 类 应 用 程序 ， 其 中 最 常用 的 是 Web 应 用 开发 。Node 
的 代码 依赖 模式 将 这 一 任务 交 给 进行 第 三 方 模块 开发 的 社区 , 模块 至 模块 。 来 自 全 球 各 地 的 公司 
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和 个 人 开发 者 加 入 到 了 这 一 行列 ， 扩 展 Node 的 核心 API， 给 应 用 开发 带 来 一 个 更 好 的 起 点 。 


在 多 个 支持 Web 应 用 开发 的 模块 中 ， 最 有 名 的 当 属 Connect 模 块 。 以 Node 底 层 API 为 核心 ， 
Connect 整 合 了 一 系列 包装 程序 用 以 Web 应 用 框架 的 开发 。 为 了 理解 Connect， 让 我 们 先 来 看 一 个 
最 基本 的 Node Web 服 务 器 的 例子 。 创 建 一 个 名 为 serverjs 的 文件 ， 输 入 如 下 内 容 : 




















var http = require('http'); 


http.createServer (function(req, res)t{ 
res.writeHead(200, { 
'Content-Type': 'text/plain' 
地 
res.end('Hello World'); 
}) .listen(3000); 


console.log('Server running at http://localhost:3000/'); 


启动 上 面 刚刚 完成 的 Web 服 务 絮 也 很 简单 ,使 用 命令 行 工具 ,进入 到 serverjs 文 件 所 在 的 目录 ， 
然后 执行 如 下 命令 : 





$ node server 
然后 用 浏览 器 打开 http://localhost:3000/， 即 可 以 看 到 Web 服 务 器 的 响应 : Hello World。 


这 其 中 的 工作 原理 是 什么 ? 上述 例子 中 , pttp 模 块 创建 了 一 个 轻 量 级 的 Web 服 务 器 , 用 以 监 
听 3000 端 口 。 第 一 步 ， 向 http 模 块 发 出 请 求 ; 第 二 步 ， 调 用 createsServer () 方 法 创建 一 个 监 
听 3000 端 口 的 server 对 象 。 注 意 ， 这 里 传 了 一 个 回调 函数 给 createserver () 方 法 。 


当 Web 服 务 器 收 到 HTTP 请 求 时 ， 回 调 函 数 便 会 执行 。server 对 象 会 将 req 和 res 两 个 参数 
传 给 回调 函数 ,这 两 个 参数 包含 有 响应 HTTP 请 求 所 需 的 信息 和 功能 函数 。 回 调 函 数 将 执行 如 下 
两 步 。 


(1) 首先 是 调用 response 对 象 的 writeHead() 方 法 。 该 方法 用 来 设置 HTTP 响 应 标 头 。 在 本 
例 中 设置 了 content-Type 的 标 头 值 为 text/plain。 如 果 响 应 的 内 容 是 HTML ， 则 要 用 
html /plain 替 代 这 里 的 text /plain。 


(2) 接着 , 调用 response 对 象 的 end ( ) 方 法 。 该 方法 用 于 完成 响应 。 这 里 是 将 单个 字符 串 作 


为 参数 传人 end () ， 作 为 HTTP 响 应 的 主体 。 另 一 种 更 为 常用 的 做 法 是 先 用 write() 增 加 主体 内 
容 ， 再 用 ena () 完成 响应 ， 如 下 所 示 : 




































































res.write('Hello World'); 
res.end(); 


上 述 例子 演示 了 如 何 用 Node 底 层 API 来 实现 一 些 必要 的 基本 功能 。 然 后 这 也 仪 仅 是 个 例子 
罢了 ， 者 要 通过 调用 底层 API 完 成 一 个 功能 齐全 的 Web 应 用 ， 将 需要 编写 大 量 的 补充 性 代码 才 
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能 实现 那些 基本 需求 。 好 在 一 个 叫 Sencha 的 公司 开发 了 Connect 模 块 ， 帮 助 完 成 了 很 多 基础 性 


的 工作 。 


初 识 Connect 模 块 


Connect 是 一 个 拦截 所 有 请 求 ， 并 以 一 种 更 模块 化 的 方法 进行 拦截 处 理 的 模块 。 在 上 述 Web 
服务 需 例 子 中 ,我 们 已 经 演示 了 如 何 利用 http 模 块 来 构造 一 个 Web 服 务 器 。 如 果 想 扩展 这 个 例子 ， 
那么 就 需要 编写 代码 来 管理 服务 器 所 收 到 的 各 类 HTTP 请 求 ， 进 而 对 这 些 请 求 进行 适当 的 处 理 ， 




















并 且 逐 个 响应 。 





为 实现 这 一 目的 ，Connect 提 供 了 API。Connect 使 用 名 为 中 间 件 的 模块 化 组 件 ， 来 简化 在 预 
定义 的 HTTP 请 求情 景 上 进行 的 应 用 人 逻辑 注册 。Connect 中 间 件 基本 上 以 回调 函数 为 主 ， 当 HTTP 
请 求 出 现时 便 开始 执行 。 中 间 件 会 首先 进行 一 些 逻 辑 处 理 , 然后 对 请 求 进行 响应 , 或 者 调用 下 一 


个 注册 了 的 中 间 件 。Connect 中 也 包含 一 些 比 较 常 月 








的 中 间 件 ， 比 如 日 志 工 具 、 静 态 文件 服务 工 


具 等 ， 因 此 你 只 需要 按照 你 的 应 用 需求 进行 中 间 件 自 定义 即 可 。 


Connect 使 用 di spatcher( 调度 器 ) 对 象 负责 处 理 服务 器 收 到 的 每 个 HTTP 请 求 ， 并 以 级 联 
的 方式 组 织 好 中 间 件 ， 依 次 执行 。 为 了 更 好 地 理解 Connect， 请 参看 下 图 。 























调度 器 GET /about GET /js/common.js 

| 

应 用 记录 器 next() next() 
| 

主体 解析 器 next(}) next() 
| 

静态 文件 中 间 件 next() res.end() 
自 定义 中 间 件 res.endl) 
Connect 人 处 理 流程 图 
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上 图 中 Connect 处 理 了 两 个 不 同 的 请 求 ， 第 一 个 由 一 个 自 定义 的 中 间 件 进行 处 理 ， 第 二 个 由 
静态 文件 中 间 件 进行 处 理 。Connect 的 调度 器 启动 了 处 理 流程 ， 并 使 用 next () 方 法 来 调用 下 一 个 
处 理 程 序 。 直 到 某 一 个 中 间 件 使 用 res .ena () 方 法 完成 了 响应 ， 整 个 请 求 才 算 处 理 完毕 。 




















下 一 章 中 将 介绍 如 何 使 用 Express， 其 实 Express 就 是 基于 Connect 的 。 因 此 ， 为 了 便于 了 解 
Express， 我 们 从 理解 Connect 开 始 ， 首 先 创建 一 个 Connect 应 用 。 


创建 一 个 名 为 serverjs 的 文件 ， 并 输入 如 下 代码 : 


Var connect = require('connect'); 


Var app = connect(); 
app.listen(3000); 


console.log('Server running at http://localhost:3000/'); 


如 你 所 见 ， 上述 代 码 通 过 使 用 connect 模 块 创建 了 一 个 Web 服 务 器 。 但是, Connect 并 不 是 核 
心 模块 , 所 以 要 用 NPM 进 行 安装 。 正 如 上 文 所 述 , 安装 第 三 方 模块 有 多 种 方法 。 其 中 最 简便 的 方 
法 是 直接 调用 npm instal1 命 令 。 要 想 使 用 该 命令 进行 安装 ， 首 先 请 打开 命令 行 工具 ， 进 入 到 
刚刚 创建 的 server.js 所 在 的 目录 ， 执 行 如 下 命令 : 






































$ npm install connect 








NPM 便 会 将 Connect 安 装 到 node_modules 目 录 中 ， 这 样 便 可 在 程序 中 向 它 发 送 请 求 。 运 行 适 


才 创 建 好 的 Web 服 务 器 ， 执 行 如 下 命令 即 可 : 


$ node server 





Node 将 启动 上 文中 创建 好 的 服务 器 ， 并 | 





日 用 console. log () 语 句 打 出 服务 咒 的 状态 。 你 可 


以 在 浏览 器 中 尝试 访问 http://localhost:3000/。 不 出 意外 的 话 ， 你 将 会 看 到 如 下 界面 : 














@@ 日 6 < localhost:3000 
所 Cx localhost:300! 一 
Cannot GET / 

Connect 应 用 空 响应 
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该 响应 表明 应 用 里 目前 还 没有 任何 中 间 件 来 响应 HTTP GET 请 求 。 这 意味 着 你 需要 注意 以 下 





两 点 : 





口 你 已 经 成 功 安 装 并 使 用 了 Connect 模 块 
口 你 应 该 开始 着 手 编写 Connect 中 间 件 了 


1. Connect 中 间 件 
Connect 中 间 件 其 实 就 是 拥有 革 一 特定 功能 的 JavaScript 函 数 。 每 个 中 间 件 都 有 如 下 三 个 参数 。 


口 *edq: 包含 所 有 HTTP 请 求 信 息 的 对 象 。 
口 res: 包含 所 有 HTTP 响 应 的 信息 ， 并 可 以 通过 它 来 设置 响应 的 各 种 属性 。 
口 nest: 指向 Connect 中 间 件 级 联 中 下 一 个 中 间 件 函数 。 


定义 好 一 个 中 间 件 后 , 只 需要 使 用 app .use() 注 册 即 可 。 下 面 我 们 将 对 前 面 所 讲述 的 例子 进 
































行 扩充 。 编 写 一 个 中 间 件 ， 修 改 serverjs 如 下 : 














Var connect = require('connect'); 
var app = connect () ; 


var helloWorld = function(req, res, next) { 
res.setHeader('Content-Type', 'text/plain'); 
res.end('Hello World'); 

}; 

app.use (helloWorld); 


app.listen(3000); 
console.log('Server running at http://localhost:3000/'); 


然后 用 下 面 的 命令 再 次 启动 服务 器 : 


$ node server 


再 次 访问 一 下 http:/localhost:3000， 你 将 会 看 到 如 下 界面 : 





@ OO | ylocalhost:3000 


各 EX localhost:3000 


Hello World 











Connect 应 用 的 响应 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





32 


第 2 章 Node.js 入 门 





大 功 告 成 ， 第 一 个 Connect 中 间 件 创建 完毕 ! 
下 面 简明 重 述 一 下 Connect 中 间 件 的 创建 过 程 。 首 先 ， 添 加 一 个 名 为 helLloworlda() 的 中 间 





件 函 数 ， 并 传人 rea、res 和 next 三 个 参数 。 该 自 定义 的 中 间 件 使 用 res . setHeader () 方 法 设 
置 了 content-Type 标 头 ， 然 后 用 res .end() 设 置 了 响应 内 容 ， 最 后 使 用 app .use () 在 Connect 
应 用 中 注册 了 这 一 中 间 件 。 











2. 理解 Connect 中 间 件 的 执行 顺序 
Connect 最 大 的 特点 之 一 便 是 可 以 注册 任意 数量 的 中 间 件 。 通 过 使 用 app .use () 方 法 ， 可 以 



































将 中 间 件 函数 连 成 一 串 , 进而 在 程序 开发 时 最 大 限度 地 保证 其 灵活 性 。 在 执行 的 过 程 中 , Connect 
将 下 一 个 要 执行 的 中 间 件 函数 以 next 参 数 的 方式 传 给 即将 执行 的 中 间 件 函数 。 在 每 一 个 中 间 件 
函数 中 , 都 可 以 决定 到 底 是 立即 结束 执行 ， 还 是 继续 执行 下 一 个 中 间 件 函数 。 要 注意 的 是 ,中 间 


件 函 






































数 的 执行 遵循 先进 先 出 (FIFO ，first-in-first-out ) 的 顺序 ， 直 到 所 有 的 中 间 件 函数 都 执行 完 








毕 , 或 者 某 个 中 间 件 函数 没有 调用 `next 方法 。 





为 了 更 好 地 理解 ， 下 面 将 前 面 的 例子 添加 一 个 名 为 1oggez 的 函数 ， 用 以 将 服务 器 所 收 到 的 





所 有 的 请 求 打 印 到 命令 行 中 。 将 serverjs 进 行 如 下 修改 : 


var connect = require('connect'); 
Var app = connect () ; 


var logger = function(req, res, next) { 
console.log(req.method, req.url); 


next (); 
}; 


Var helloWorld = function(req, res, next) { 
res.setHeader('Content-Type', 'text/plain'); 
res.end('Hello World'); 

} 

app.use(logger); 

app.use (helloWorld);} 

app.listen(3000); 


console.log('Server running at http://localhost:3000/'); 


上 述 代码 段 中 ， 增 加 了 一 个 名 为 logger 的 中 间 件 , 使 用 console.1og 方 法 简单 地 将 请 求 信 


息 打印 在 了 终端 FE。 注意 1ogger 中 间 件 注册 在 hellowor1d() 中间 件 之 前 ， 这 决定 了 各 个 中 间 
件 的 执行 顺序 。 另 外 , 在 1ogger 中 还 调用 了 next () ， 用 以 调用 helloworla() 中间 件 。 如 果 将 
next ( ) 这 行 删除 ， 那么 程序 执行 到 logger 中 间 件 便 会 停 下 来 。 然而 此 时 还 没有 调用 res .end () 
方法 ,请 求 便 会 永远 得 不 到 响应 一直 处 于 挂 起 状态 。 





图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





2.4 Node.js Web 应 用 开发 。 33 











为 了 测试 所 做 修改 ,使 用 如 下 命令 再 次 启动 服务 器 即 可 : 

$ node server 

接 下 来 访问 http://localhost:3000/。 命 令 行 工 具 中 会 输出 浏览 器 的 请 求 信息 。 

3. Connect 中 间 件 的 加 载 

你 可 能 已 经 注意 到 了 ， 不管 请 求 Web 服 务 器 的 哪个 路 径 ， 你 所 注册 的 中 间 件 都 会 执行 。 这 并 
不 符合 如 今 的 Web 应 用 开发 习惯 一 一 针对 不 同 路 径 作出 不 同 响应 Connect 通 过 加 载 来 满足 这 一 需 


求 , 可 以 让 你 根据 不 同 的 请 求 路 径 来 确定 中 间 件 执行 与 否 。 在 app.use() 方 法 中 传人 路 径 即 可 开 
启 加 载 功 能 。 为 了 更 好 地 理解 ， 我 们 回 到 前 面 的 例子 。 请 参照 如 下 示例 修改 serverjs: 


Var connect = require('connect'); 
Var app = connect () ; 











Var logger = function(req, res, next) { 
console.log(req.method, req.url); 


next (); 


}; 


Var helloWworld = function(req, res, next) { 
res.setHeader('Content-Type', 'text/plain'); 
res.end('Hello World'); 

和 


var goodbyeWor1d = function(req, res, next) { 
res.setHeader('Content-Type', 'text/plain'); 
res.end('Goodbye World'); 

}; 


app.use (logger); 

app.use('/hello', helloWorld); 
app.use('/goodbye'，goodbyeWor1d) 
app.listen(3000); 


console.log('Server running at http://localhost:3000/'); 


上 述 代 码 中 有 几 处 修改 , 一 是 加 载 的 中 间 件 hellowor1a () 将 仅 响 应 路 径 为 /hello 的 请 求 。 二 
是 增加 了 一 个 稍 显 怪 异 的 goodbyewor19() 中间 件 , 它 将 仅 响应 路 径 为 /goodbye 的 请 求 。1ogger 
中 间 件 并 没有 修改 , 它 依 然 是 响应 所 有 的 请 求 。 另 外 要 注意 的 是 , 这 几 个 中 间 件 都 不 会 响应 对 基 
本 路 径 的 请 求 ， 因 为 我 们 把 中 间 件 nellowor1d() 加载 到 了 一 个 指定 的 路 径 。 


Connect 是 一 个 很 强大 的 模块 ， 它 支持 了 常规 Web 应 用 的 大 量 特性 。Connect 的 中 间 件 非常 简 
单 而 又 颇具 JavaScript 包 格 。 它 既 可 以 帮 你 无 限 扩展 应 用 逻辑 ， 又 不 会 打破 Node 平 台 的 敏捷 哲学 。 
它 既 可 以 有 效 改 善 Web 应 用 的 基础 架构 ， 又 刻意 缺失 了 其 他 Web 框 架 的 一 些 基 本 功能 ， 其 原因 在 
于 它 遵循 了 Node 社 区 的 一 个 基本 理念 : 创建 精简 的 模块 , 让 其 他 人 在 你 创建 的 模块 的 基础 上 创建 
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新 的 模块 。 整 个 社区 的 人 都 想 在 Connect 的 基础 之 上 创建 自己 的 Web 基 础 架构 ， 最 终 ， 一 个 名 叫 
TJ Holowaychuk 的 天 才 程 序 员 的 作品 赢得 了 大 多 数 人 的 认可 ， 这 便 是 如 今 已 经 无 人 不 知 的 基于 








Connect 的 Web 框 架 





2.5 ”总结 


本 章 介 绍 了 Node.js 如 何 利 月 


Expresso 


月 JavaScript 的 习 























码 件 驱动 特性 , 以 及 如 何 使 用 CommonJS 的 模块 系统 


来 扩展 其 核心 功能 。 还 介绍 了 Node.js Web 应 用 的 基本 原理 和 Connect 模 块 。 此 外 还 学 习 了 如 何 创 


建 Connect 应 用 ， 以 及 如 何 使 用 中 间 件 函数 。 下 一 章 将 讨论 基于 Connect 的 Web 框 架 
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本 章 将 讲述 如 何以 最 佳 方式 使 用 Express 创 建 Web 应 用 。 首先 安装 和 配置 Express, 接 下 来 介绍 
Express 的 主 API。 然 后 讨论 Express 的 请 求 、 响 应 和 应 用 对 象 ， 以 及 Express 路 由 机 制 的 运用 。 另 外 
我 们 还 将 探讨 在 开发 过 程 中 如 何 根据 项 目 类 型 组 织 应 用 程序 文件 夹 的 结构 。 学 完 本 章 , 你 将 会 了 
解 到 如 何 创建 一 个 完整 的 Express 应 用 。 本 章 的 主要 内 容 如 下 : 


口 安装 Express， 并 创建 一 个 新 的 Express 应 用 
口 组 织 项 目的 结构 

口 配置 Express 应 用 

口 使 用 Express 的 路 由 机 制 

口 泻 染 EJS 视 图 

口 静态 文件 服务 

口 配置 Express 会 话 























3.1 ”Express 简介 





如 果 仅 仅 将 TJ Holowaychuk 称 为 一 个 高 效 的 程序 员 ， 那 实在 是 过 于 轻描淡写 了 。 他 对 Node 
社区 的 贡献 几乎 无 人 堪 比 。TJ 一 共 发 起 了 500 多 个 开源 项 目 ， 他 还 负责 着 好 几 个 JavaScript 生 态 系 
统 中 最 流行 的 框架 。 


Express 便 是 他 最 伟大 的 作品 之 一 。 Express 是 目前 常规 Web 框 架 功 能 的 最 小 集 , 它 延 续 了 Node 
风格 ,保持 了 功能 的 最 小 化 。Express 基 于 Connect， 并 很 好 地 利用 了 Connect 中 间 件 架构 。 它 在 
Connect 的 基础 上 扩展 了 多 个 功能 ， 以 满足 Web 应 用 常见 的 需求 ， 比 如 模块 化 的 HTML 模 板 引 擎 ， 
扩展 *esponse 对 象 以 支持 各 种 各 样 数据 格式 的 输出 ， 路 由 系统 ， 等 等 。 


前 面 介 绍 了 如 何 使 用 一 个 单 文 件 serverjs 来 创建 应 用 。 使 用 Express， 你 将 了 解 到 怎样 来 更 好 
地 组 织 项 目 目录 结构 、 配 置 应 用 、 模 块 化 应 用 逻辑 ， 以 及 怎样 使 用 EJS 模 块 引 擎 、 管 理会 话 和 使 
用 路 由 。 学 完 本 节 ， 你 将 完成 一 个 在 本 书后 面部 分 都 用 得 着 的 应 用 骨架 。 让 我 们 着 手 开始 吧 。 
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3.2 Express 安装 








前 面 我 们 一 直 使 用 npm 来 直接 为 Node 应 用 安装 扩展 模块 ， 在 此 同样 也 可 以 用 它 来 安装 


Express， 命 令 如 下 : 

$ npm install express 

但 是 ,这 样 直 接 安装 模块 并 不 利于 应 用 的 可 扩展 性 。 试 想 一 下 , 应 用 中 往往 要 安装 很 多 的 模 
块 , 然后 要 在 不 同 的 工作 环境 中 对 其 进行 迁移 ， 有 时 候 甚至 需要 与 其 他 的 开发 人 员 进 行 共享 。 如 
果 还 这 样 直接 安装 扩展 ， 那 影响 的 就 不 单单 是 效率 了 。 因 此 ， 在 项 目 中 最 好 是 使 用 package.json 
来 组 织 应 用 的 元 数据 ， 并 管理 依赖 。 

为 新 的 应 用 创建 一 个 文件 夹 ， 并 在 其 中 创建 一 个 package.json 文 件 ， 存 人 如 下 内 容 : 


{ 

































































"name" : "MEAN", 

MyerSIoOnT 3 O03 

"dependencies" : { 
"express" : "~4.8.8" 


} 
} 
在 新 建 的 package.json 中 ， 共 有 三 个 属性 ，name 、version 和 dependencies， 分 别 表 示 新 
应 用 的 名 字 、 版 本 号 和 依赖 ,依赖 中 的 模块 是 应 用 运行 前 所 必须 安装 的 。 为 安装 这 些 模块 ,打开 
命令 行 工具 ， 进 入 到 新 的 应 用 所 在 的 目录 ， 运 行 如 下 命令 : 








$ npm install 


接着 NPM 便 会 开始 安装 package.json 中 列 明 的 唯一 一 个 依赖 





Expresso 


3.3 创建 第 一 个 Express 应 用 


创建 好 package.json 并 安装 完 依 赖 后 ， 就 可 以 着 手 创建 Express 应 用 了 。 首 先 ， 新 建 一 个 已 经 
熟知 的 serverjs 文 件 ， 并 为 其 输入 如 下 代码 : 


var express = require('express'); 
Var app = express();} 





app.use('/', function(req, res) { 
res.send('Hello World'); 
这 


app.listen(3000); 
console.log('Server running at http://localhost:3000/'); 


module.exports = app; 
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上 述 的 大 部 分 代码 我 们 应 该 已 经 非常 熟悉 了 , 第 一 行 包 含 了 Express 模 块 , 第 二 行 创建 了 一 个 
Express 应 用 对 象 , 然后 用 app .use () 在 指定 路 径 加 载 了 一 个 中 间 件 函数 , 用 app.1isten () 方 法 
设置 了 应 用 需要 监听 的 3000 端 口 。 注 意 ，module .exports 对 象 是 用 于 返回 应 用 程序 对 象 的 ， 
可 以 用 于 加 载 和 测试 Express 应 用 。 


我 们 熟悉 上 述 代 码 ， 它 们 与 前 面 章节 所 举 Connect 的 例子 相 类 似 。 其 原因 在 于 ，Express 原 本 
就 是 将 Connect 模 块 进行 的 多 方面 扩展 。 app .use () 用 于 加 载 对 所 有 发 送 到 根 路 径 的 HTTP 请 求 进 
行 响应 的 中 间 件 函数 。app.sena () 方 法 用 于 发 回 所 有 响应 ， 该 方法 其 实 是 Express 对 Connect 模 
块 功能 的 封装 。 它 包括 两 方面 操作 ， 一 是 根据 response 对 象 类 型 设置 Content-Type 报 头 ， 二 
是 用 res .enda() 发 回 所 有 响应 。 

































































res .send() 会 根据 发 送 内 容 对 Content-Type 报 关 进 行 设置 。 如 果 被 发 送 

的 是 缓冲 区 ,Content-Type 报 头 将 会 被 设置 为 application/octet-stream; 

一 如 果 被 发 送 的 是 字符 串 ， 它 将 会 被 设置 为 Lext /html; 如 果 被 发 送 的 是 对 象 或 
者 数组 ， 它 将 会 被 设置 为 application/json。 


运行 新 创建 的 应 用 ， 运 行 如 下 命令 即 可 : 
$ node server 


第 一 个 应 用 就 创建 完成 了 。 你 可 以 通过 浏览 器 访问 http://localhost:3000/ 对 其 进行 测试 。 











3.4” 应用、 请求 和 响应 对 象 


Express 提 供 了 这 三 个 使 用 频率 较 高 的 对 象 。 其 中 ， 应 用 对 象 指 的 是 上 面 的 例子 中 创建 的 
Express 应 用 实例 , 通常 它 会 被 用 于 实现 对 应 用 的 配置 。 请 求 对 象 指 的 是 Node HTTP 请 求 对 象 的 封 
装 ， 用 于 获取 当前 正在 处 理 的 请 求 信息 。 响 应 对 象 指 的 是 Node HITTP 响 应 对 象 的 封装 ,用 于 设置 
啊 应 包头 和 数据 。 









































3.4.1 应 用 对 象 
应 用 对 象 包含 以 下 几 个 用 以 对 应 用 进行 配置 的 方法 。 


口 app.set (name，value): 用 于 设置 Express 配 置 中 的 环境 变量 。 

口 app .get (name) : 用 于 获取 Express 配 置 中 的 环境 变量 。 

口 app.engine (ext，callback) : 用 于 指定 模板 引擎 中 的 浑 染 文件 类 型 。 比 如 ， 如 果 要 
将 HIML 文 件 指定 为 EJS 模 板 引 人 擎 的 泻 染 文件 模板 ， 使 用 appb.engine('html '， 
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require('ejs').renderFIle); 即 可 。 

口 app .locals: 用 于 向 泻 染 模 板 发 送 应 用 级 变量 。 

口 app.use( [path]，callback): 用 于 创建 处 理 HTTP 请 求 的 中 间 件 。 通 常情 况 下 ， 它 可 

以 用 于 加 载 响应 某 个 或 菜 几 个 路 径 径 的 中 间 件 。 

口 appbp.VERB (path， [callback...]，callback): 用 于 定义 一 个 或 多 个 中 间 件 函数 ， 
以 响应 特定 HTTP 方 法 发 往 某 一 指定 路 径 的 请 求 。 比如 ， 如 果 只 响应 GET 方法 的 请 求 ， 使 
用 app .get () 即 可 。 如 果 只 响应 PosT 请 求 ， 使 用 app .post () 即 可 ， 诸 如 此 类 。 

口 app.route(path) .VERB([callback...]，callback): 用 于 定义 一 个 或 多 个 中 间 件 
来 响应 发 往 某 一 路 径 的 多 种 HTTPi 青 求 方法 。 举 个 例子 ， 若 要 响应 GET 和 PosT 两 类 请 求 ， 
这 样 定 义 中 间 件 函数 即 可 : app.route(path) .get (callback) .post (callback)。 

口 app.param( [name]，callback): 用 于 对 发 往 某 一 路 径 上 且 包 含 指定 路 由 参数 的 请 求 附 
加 某 一 特定 功能 。 比 如 ， 可 以 向 所 有 包含 含 userId 人 参数 的 请 求 影射 特定 逻辑 : 


abpp.param('uSetId'，callback) 。 


还 有 很 多 其 他 可 以 用 得 上 的 方法 ,不 过 上 面 这 几 个 基本 的 方法 已 经 可 以 帮助 开发 人 员 对 
Express 进 行 合理 的 扩展 了 。 















































3.4.2 “请求 对 象 
请 求 对 象 也 包含 一 些 用 于 获取 当前 HTTP 请 求 信息 的 方法 。 请 求 对 象 主要 的 属性 和 方法 如 下 。 


口 regq.query: 即 已 解析 为 对 象 的 所 有 GET 参 数 。 

口 regq.params: 即 已 解析 为 对 象 的 路 由 参数 。 

口 regq.body: 该 属性 包含 在 bodyParser () 中 间 件 中 ， 用 于 获取 所 有 请 求 的 body 部 分 。 

D req.param(name): 用 于 获取 请 求 参 数 ， 包 括 GET 参 数 、 路 由 参数 ， 或 请 求 body 部 分 的 
JSON 属 性 。 

口 req.path、req.host 及 req.ip: 即 当前 请 求 的 路 径 、 主 机 名 和 访问 者 的 IP。 

口 regq.cookies: 该 方法 需要 与 cookieParser () 中 间 件 结合 使 用 ， 用 于 获取 用 户 浏 览 器 
传 来 的 cookies。 



































3.4.3 ”响应 对 象 


向 应 对 象 是 Express 应 用 开发 中 的 常用 对 象 ,因为 所 有 请 求 的 处 理 和 响应 都 需要 通过 响应 对 象 
方法 。 有 如 下 几 个 重要 方法 。 


口 fes.status(code) 人 
口 res.set (field，[value]): 用 于 设置 响应 的 HTTP 报 头 。 
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D res.cookie(name，value，[options]): 用 于 设置 啊 应 的 浏览 露 cookies。options 

参数 是 一 个 对 象 ， 用 于 定义 cookies 配 置 ， 比 如 maxaAge 属 性 。 

口 res.redirect ([status]，url): 用 于 将 请 求 重新 定位 到 参数 url 所 定义 的 URL。 注 

意 ，HTTP 状 态 码 参数 是 可 添加 的 ， 其 默认 值 为 302。 

口 res.send([bodylstatus]，[body]): 主要 用 于 非 流 式 响应 。 该 方法 包括 多 个 操作 ， 

比如 设置 Content -Type 和 content-Length 报 头 ， 根 据 情况 设置 cache 选 项 等 。 

口 res.json([statuslbody]， [body]) : 若 用 于 发 送 对 象 或 者 数组 ， 该 方法 与 
res.send() 完 全 一 致 。 不 过 大 多 数 情况 下 ， 该 方法 将 会 被 用 作为 语法 糖 。 然 后 某 些 情况 
下 ， 它 也 可 以 被 用 来 强制 发 送 JSON 的 空 对 象 ， 比 如 null 和 ungdefined。 

口 res.render (view，, [locals], callback): 用 于 视图 泻 染 , 并 发 送 包 含 HTML 的 响应 。 


啊 应 对 象 还 包括 一 些 用 于 处 理 不 同 响应 情景 下 的 方法 和 属性 , 稍 后 本 书 将 会 对 此 进行 进一步 
的 探讨 。 








| 



























































3.5 外 部 的 中 间 件 


Express 本 身 功 能 是 有 限 的 , 但 其 他 团队 在 其 基础 上 提供 了 很 多 预定 义 的 中 间 件 , 覆盖 了 常见 
Web 框 架 的 功能 。 这 些 中 间 件 无 论 是 种 类 还 是 功能 都 非常 丰富 , 使 得 扩展 后 的 Express 能 提供 更 好 
的 框架 支持 。 比 较 受 欢迎 的 Express 中 间 件 如 下 。 


口 Morgan: 记录 HTTP 请 求 日 志 。 

口 pody-parser: 对 请 求 body 进 行 解析 ， 支 持 多 种 HTTP 请 求 类 型 。 

口 method-override: 用 于 处 理 客户 端 不 支持 的 HTTP 方 法 ， 如 PUT 和 DELETE 等 :。 
口 Compression: 对 响应 数据 使 用 gzip/deflate 进 行 压缩 。 

口 express .static: 用 于 提供 静态 文件 服务 。 

口 cookie-parser: 解析 cookies， 并 将 结果 组 装 req .cookies 对 象 。 

口 Session: 支持 持久 会 话 。 


还 有 很 多 Express 中 间 件 可 以 帮 你 节省 开发 时 间 ， 以 及 数 不 清 的 第 三 方 中 间 件 。 


















































了 解 更 多 关于 Connect 和 Express 中 间 件 信息 ， 你 可 以 访问 https://github.com/ 
senchalabs/connect#middleware 。 你 还 可 以 通过 访问 https://github.com/senchalabs/ 
connect/wiki 来 查看 更 多 的 第 三 方 中 间 件 。 
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3.6 ”实现 MVC 模式 


Express 没 有 特定 架构 模式 ,所 以 它 并 不 像 其 他 Web 框 架 一 样 文 持 预 定义 的 语法 或 结构 。 这 意 
味 着 在 Express 应 用 中 运用 MVC 模 式 ， 你 就 可 以 通过 创建 具体 的 文件 夹 对 JavaScript 文 件 按照 某 种 
逻辑 顺序 进行 管理 。 所 有 的 JavaScript 文 件 都 按照 CommonJS 的 模块 规范 进行 逻辑 划分 。 比 如 ， 用 
于 定义 Mongoose models 有 是 按 CommonJS 模 型 标准 组 织 的 模型 都 存放 在 名 为 models 文 件 夹 中 ， 
HTML 和 其 他 的 模板 文件 的 视图 存放 在 名 为 views 的 文件 夹 中 ， 具 有 特定 功能 的 方法 且 按 
CommonJS 模 型 标准 组 织 的 控制 器 则 存放 在 名 为 controllers 文 件 夹 中 。 为 了 更 好 地 理解 这 些 ， 请 首 
先 来 看 看 组 织 应 用 文件 夹 结 构 的 几 种 不 同 的 方式 。 


























应 用 文件 来 结构 


前 面 的 内 容 曾 讨论 了 如 何在 实践 中 更 好 地 进行 开发 工作 ， 比 如 推荐 使 用 package.json 直 接 进 
行 模块 安装 。 不 过 这 仅仅 是 着 手 开发 应 用 的 第 一 步 ,接着 你 便 会 疑惑 于 如 何 组 织 项 目 文件 ， 以 及 
怎样 对 代码 进行 逻辑 单位 的 划分 。JavaScript 和 Express 框 架 本 身 并 没有 对 代码 的 组 织 结 构 进 行规 
范 ， 如 果 你 愿意 ,你 甚至 可 以 把 所 有 的 代码 都 放 在 一 个 文件 中 。 其 原因 在 于 ,以 前 从 来 没 人 想 过 
JavaScript 竞 然 会 有 成 为 全 栈 开发 语言 的 一 天 ， 不 过 这 并 不 意味 着 你 真 的 可 以 随意 组 织 代码 结构 。 
随 着 MEAN 的 出 现 , JavaScript 可 以 用 来 实现 各 种 规模 和 复杂 度 的 应 用 , 同样 也 就 出 现 了 多 种 组 织 
代码 结构 的 方法 。 针 对 不 同 代 码 结构 的 讨论 ,通常 是 与 程序 的 复杂 程序 相关 的 。 比 如 ， 简 单 的 应 
用 往往 需要 的 是 简洁 的 文件 夹 结构 ， 以 便 可 以 更 简单 、 更 整洁 。 而 复杂 度 高 的 应 用 则 需要 更 复杂 
的 文件 夹 结构 ,这 样 便 可 以 更 好 地 进行 逻辑 划分 ， 以 便 包 含 更 多 的 功能 ,也 便于 大 型 团队 的 分 工 
合作 。 简 单 来 讲 ， 对 代码 结构 的 组 织 ， 主 要 有 两 种 相对 合理 的 方法 : 小 型 项 目的 水 平 组 织 法 和 复 
杂 应 用 的 垂直 组 织 法 。 首 先 来 看 简单 的 水 平 组 织 } 

1. 水 平 文件 夹 结构 

水 平 项 目 结构 的 文件 夹 或 者 文件 划分 标准 是 按 文件 夹 或 者 文件 的 功能 性 角色 , 而 不 是 他 们 所 
具体 实现 的 功能 。 这 意味 着 ， 整 个 应 用 的 文件 都 放 在 一 个 按 MVC 文 件 夹 结 构 组 合 的 目录 之 内 ， 


即 所 有 的 控制 器 放 在 一 个 controllers 目 录 中 ， 而 所 有 的 模型 都 放 在 一 个 models 目 录 中 ， 诸 如 此 类 。 
下 图 便 是 一 个 这 样 组 织 的 项 目 结构 。 
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3 Horizontal Structure 


controllers 
models 
routes 
views 
config 
env 
面 config.js 
国 express.js 
public 
config 
controllers 
css 
directives 
filters 
img 
services 
Views 
男 application.js 
加 server.js 
package.json 


水 平 文件 夹 结构 
下 面 来 分 析 一 下 上 图 中 的 文件 夹 结构 。 
口 app 文 件 夹 用 于 保存 Express 应 用 的 逻辑 部 分 相关 代码 ， 按 照 MVC 模 式 分 为 如 下 儿 个 文件 夹 : 


昌 controllers 文 件 夹 ， 存 放 Express 应 用 的 控制 器 文件 
@ models 文 件 来， 存放 Express 应 用 的 模型 文件 

四 routes 文 件 夹 ， 存 放 Express 应 用 的 路 由 中 间 件 文件 
@ Views 文 件 夹 ， 存 放 Express 应 用 的 视图 文件 


口 config 文 件 夹 用 于 存放 Express 应 用 的 配置 文件 。 对 于 应 用 中 的 新 增 模 块 , 每 个 模块 都 有 一 
个 对 应 的 配置 文件 ， 这 些 配置 文件 都 存放 在 该 文件 夹 内 。 目 前 该 文件 夹 包含 以 下 这 些 文 
件 夹 和 文件 : 


@ env 文件 来， 存储 Express 应 用 环境 配置 文件 
@ config.js 文 件 ， 用 于 Express 应 用 配置 
四 express.js 文 件 ， 用 于 Express 应 用 初始 化 


public 文 件 夹 用 于 保存 浏览 器 端的 静态 文件 ， 按 MVC 模 式 分 为 如 下 目录 : 


@ config 文 件 来， 用 于 存储 AngularJS 应 用 的 配置 文件 

昌 controllers 文 件 夹 ， 用 于 存储 AngularJS 应 用 的 控制 器 文件 
css 文件 夹 ， 用 于 存放 CSS 文 件 

@ directives 文 件 夹 ， 用 于 存放 AngularJS 应 用 的 指令 文件 

@ filters 文 件 夹 ， 存 放 AngularJS 应 用 的 过 滤器 文件 

m img 文 件 夹 ， 存 放 图 片 























口 
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和 Views 文 件 夹 ， 存 放 AngularJS 应 用 的 视图 文件 
mm application.js 文 件 ， 用 于 AngularJS 应 用 的 初始 化 


口 package.json 文 件 存 有 用 于 管理 应 用 依赖 的 元 数据 。 
口 serverjs 是 Node 程 序 的 主 文件 ， 以 模块 的 方式 加 载 express.js， 引 导 Express 应 用 的 启动 。 


如 你 所 见 ， 水 平 文件 夹 结构 非常 适合 功能 较 少 的 小 型 项 目 , 文件 组 织 方便 ,而 且 通 过 文件 夹 
名 便 可 以 知道 文件 所 扮演 的 角色 。 不 过 ,对 于 组 织 大 型 项 目的 文件 ,水 平 文件 来 结构 就 有 些 过 于 
简单 了 。 这 种 情况 下 ， 每 个 文件 夹 中 都 会 包含 大 量 文件 ， 难 以 分 辨 。 因 此 这 种 情况 最 好 是 使 用 重 
直 组 织 法 。 

2. 垂直 文件 夹 结构 

垂直 文件 夹 结构 是 根据 所 实现 的 切 能 进行 文件 和 文件 夹 划分 的 项 目 结构 。 每 个 功能 都 有 各 自 
的 按 MVC 模 式 组 织 的 目录 结构 ， 下 面 是 一 个 按 这 样 组 织 的 应 用 目录 。 



























































四 日 日 Vertical Structure 


core 
client 
config 
controllers 
Css 
directives 
filters 
img 
services 
views 
画 client.application.js 
server 
config 
controllers 
models 
routes 
oH views 
feature 
client 
config 
controllers 
Css 
directives 
filters 
img 
services 
views 
画 feature.client.module.js 
server 
config 
env 
国 feature.server.config.js 
controllers 
models 
routes 
> views 
server.js 
package.json 











重 直 文件 夹 结构 
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上 图 结构 中 每 个 功能 都 有 其 独立 的 应 用 目录 ，core 文 件 夹 存放 了 主要 的 程序 文件 ，feature 文 
件 夹 存放 了 具体 的 功能 性 文件 ， 举 个 例子 , 在 一 个 用 户 管理 的 功能 中 ,身份 鉴定 和 权限 控制 逻辑 
就 应 该 放 在 feature 中 。 为 了 更 好 地 理解 ， 我 们 来 一 一 分 析 一 下 feature 目 录 的 结构 。 


口 server 文 件 夹 用 于 存放 服务 器 逻辑 ， 其 内 部 按照 MVC 模 式 进行 了 如 下 划分 。 


昌 controllers 文 件 夹 ， 用 于 存放 Express 应 用 的 控制 器 文件 

m models 文 件 夹 ， 用 于 存放 Express 应 用 的 模型 文件 

昌 routes 文 件 夹 ， 用 于 存放 Express 应 用 的 中 间 件 文件 

views 文件 夹 ， 用 于 存放 Express 应 用 的 视图 文件 

@ config 文 件 夹 ， 用 于 存放 服务 器 端的 配置 文件 ， 包 括 : 
env 文件 夹 用 于 存放 服务 器 端 环 境 的 配置 文件 
四 feature.server.config.js 文 件 用 于 整个 功能 的 配置 


口 client 文 件 夹 用 于 存放 客户 端 文件 ， 其 内 部 按 MVC 模 式 的 理念 ， 根 据 不 同 功 能 进行 了 如 下 
划分 。 
@ config 文 件 夹 ， 存 放 AngularJS 应 用 的 配置 文件 
昌 controllers 文 件 夹 ， 存 放 AngularJS 应 用 的 控制 器 文件 
mm css 文件 夹 ， 存 放 CSS 文 件 
directives 文 件 夹 ， 存 放 AngularJS 应 用 的 指令 文件 
@ filters 文 件 夹 ， 存 放 AngularJS 应 用 的 过 滤器 文件 
国 img 文 件 夹 ， 存放 图 片 
和 Views 文 件 夹 ， 存 放 AngularJS 应 用 的 视图 文件 
四 feature.client.module.js 文 件 ， 用 于 初始 化 AngularJS 应 用 组 件 


不 难 发 现 , 垂直 文件 夹 结 构 非常 适合 于 功能 数量 不 确定 , 每 个 功能 义 包含 多 个 文件 的 大 型 项 
目 。 此 外 ， 大 型 团队 也 可 以 通过 运用 垂直 文件 夹 结 构 来 进行 合作 并 对 各 自 的 独立 代码 进行 维护 。 
同时 ， 多 个 应 用 也 可 以 用 这 种 组 织 方式 实现 功能 共享 。 


这 两 种 组 织 方 式 差不多 可 以 涵盖 所 有 应 用 的 结构 。 事 实 上 MEAN 项 目 可 以 按 多 种 方式 组 织 ， 
即使 将 两 种 方法 揉 和 在 一 起 也 未 学 不 可 。 因 而 实际 上 实用 的 是 哪 一 种 组 织 方式 ,取决 于 团队 负责 
人 的 选择 。 出 于 简易 性 考虑 ， 本 书 中 将 采用 水 平方 法 。 但 AngularJS 部 分 将 按 习惯 采用 垂直 的 方 
式 一 一 也 从 侧面 证 明了 MEAN 结 构 的 弹性 。 记 住 一 点 ,本 书 中 所 展现 的 内 容 ， 都 可 以 很 容易 地 重 
构 到 实际 项 目 规格 中 。 


3. 文件 命名 约定 


在 实际 的 开发 工作 中 , 会 经 常 遇 到 文件 重 名 的 问题 。 其 原因 在 于 MEAN 应 用 通常 包括 Express 
和 AngularJS 两 套 平行 的 MVC 结 构 。 下 面 请 看 垂直 结构 组 织 中 的 文件 命名 。 
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eee 二 Feature 
Name poet 
v GS client Folde 
v config Folde 
画 feature.js 
了 controllers 
别 feature.js ES 
services 
而 feature.js 
4 views Fold 


® feature.html HTMI 
国 feature.js 
了 Server Folde 
v config Folde 
> env 
本 feature.js 
v controllers 
画 feature.js 
了 models 
画 feature.js 
了 routes 
画 feature.js 
.4 views 
® feature.html 


EE 直 组 织 中 的 文件 命名 


显而易见 , 这样 组 织 文件 夹 结构 使 得 每 个 文件 的 功能 都 容易 理解 ,但 不 少 文件 因此 都 重 名 了 。 
原因 是 同一 个 功能 往往 需要 多 个 JavaScript 文 件 来 实现 , 而 每 个 文件 都 扮演 着 不 同 的 角色 。 这 一 问 
题 很 容易 给 同一 开发 团队 的 其 他 人 造成 混淆 。 为 了 解决 这 个 问题 ， 需 要 一 个 命名 约定 。 


最 简单 的 办 法 是 在 文件 名 中 增加 文件 的 功能 角色 ， 比 如 某 个 功能 的 控制 右 可 以 命名 为 
feature.controller.js, 功能 的 模型 文件 可 以 命名 为 feature.model.js， 如 此 等 等 。 但 在 MEAN 应 用 中 有 
Express 和 AngularJS 两 大 部 分 ， 如 果 都 这 样 命名 ， 那 只 会 让 问题 更 复杂 ， 同 一 个 文件 名 为 
feature.controller.js 的 文件 ， 即 可 能 是 AngularJ$ 的 控制 器 ,也 有 可 能 是 Express 的 控制 器 。 为 此 ， 只 
能 在 文件 名 中 再 增加 一 个 文件 具体 的 执行 目的 , Express 的 控制 器 命名 为 feature.server.controller.js， 
AngularJS 的 控制 器 命名 为 feature.client.controllerjs。 虽 然 看 起 来 有 点 儿 太 大 做 文章 了 ， 不 过 这 样 
的 确 可 以 在 只 扫 一 眼 文件 名 的 情况 下 就 知道 程序 文件 的 角色 和 执行 目的 了 。 
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记 住 , 这 只 是 最 佳 实践 的 约定 , 你 也 可 以 将 controller、 client、model、 
一 setrvez 这 些 关键 字 替 换 成 你 自己 能 理解 的 词 。 


4. 实践 水 平 文件 夹 结构 
开始 构建 MEAN 项 目 之 前 ， 首 先 创建 一 个 如 下 图 所 示 的 项 目 文件 夹 结 构 。 
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利口 日 加 Bootstrap Horizontal Structure 
Name Kind 入 
v Bi app Folder 

pb [NM controllers Folder 

> BN models Folder 

p> | routes older 

> views older 
config Folder 

> mB env Folder 
了 DY public Folder 

> css Folder 

pb i img Folder 

> js Folder 

















MEAN 项 目 水 平 文件 夹 结 构 
文件 夹 创 建 完 后 ， 回 到 应 用 的 根 目录 创建 一 个 含有 如 下 代码 的 package.json 文 件 : 


{ 


"name": "MEAN" 

EESLONY:. “O03 

"dependencies": { 
"express": "~4.8.8" 


} 
} 


进入 app/controllers/ 文 件 夹 ， 创 建 index.server.controller.js 文 件 ， 代 码 如 下 : 


exports.render = function(req, res)t{ 
res.send('Hello World'); 


}; 

很 好 , 一 个 Express 控 制 器 便 创建 好 了 。 这 个 代码 是 不 是 很 眼熟 ? 因为 这 就 是 前 面 章节 中 曾经 
创建 过 的 中 间 件 。 这 里 只 是 用 CommonJS 的 模块 规范 创建 了 一 个 名 为 render () 的 函数 ， 过 会 儿 
你 便 可 以 包含 这 个 模块 并 使 用 这 个 函数 。 创建 完 控制 器 , 接 下 来 就 是 创建 Express 路 由 功能 来 调用 
人 


(1) 处 理 路 由 请 求 







































































Express 支 持 两 种 路 由 组 织 方式 ， 即 app.route(path) .VERB (callback) 和 app .VERB 
(path，callback) (VERB 要 替换 为 小 写 的 HTTP 方 法 名 )， 如 下 : 
app.get ('/', function(req, res) { 


res.send('This is a GET request'); 
J 


上 述 代码 为 Express 指 定 了 一 个 中 间 件 函数 ， 用 于 处 理 所 有 以 GET 方 法 发 往 根 路 径 的 HTTP 请 
求 。 若 要 处 理 PosT 请 求 ， 使 用 如 下 代码 即 可 : 





app.post('/', function(req, res) { 
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res.send('This is a POST request'); 


}) 


当然 , Express 也 支持 先 定义 单个 路 径 , 再 以 链 式 方式 定义 多 个 中 间 件 , 从 而 处 理 多 种 不 同方 
法 的 HTTP 请 求 ， 如 下 所 示 : 
app.route('/').get (function(req, res) { 
res.send('This is a GET request'); 
}) .post (function(req, res) { 
res.send('This is a POST request'); 
9 
Express 另 一 个 很 酷 的 写法 是 在 单个 路 由 定义 语句 中 直接 串 上 多 个 中 间 件 ,这 些 中 间 件 函数 会 
按 序 依次 执行 ,从 其 中 一 个 传 给 下 一 个 , 便于 其 执行 方式 的 选择 。 这 种 写法 一 般 用 于 响应 逻辑 之 
前 的 各 类 验证 。 下 面 的 代码 就 是 一 个 例子 : 





var express = require('express'); 


Var hasName = function(req, res, next) { 
if (req.param('name')) { 
next (); 
} else { 
res.send('What is your name?'); 
} 
}; 


var sayHello = function(req, res, next) { 
res.send('Hello ' + req.param('name')); 
}; 


Var app = express(); 
app.get('/', hasName, sayHello); 


app.listen(3000); 
console.log('Server running at http://localhost:3000/'); 


上 述 代 码 中 , 有 名 为 hasName () 和 sayHello() 两 个 中 间 件 函数 ,hasName () 的 作用 是 看 请 
求 中 是 否 含 有 name 人 参数 。 如 果 没 有 则 直接 对 请 求 进行 响应 ， 如 果 有 就 调用 next () 进入 下 一 个 操 
作 。 本 例 中 ,app .get () 方 法 用 链 式 方法 定义 了 两 个 中 间 件 函数 。 两 个 中 间 件 的 前 后 顺序 就 是 执 
行 顺序 ， 所 以 next () 就 是 sayHel1o () 中 间 件 函数 。 


这 个 例子 很 好 地 演示 了 如 何 利用 路 由 中 间 件 来 根据 不 同 的 验证 进行 不 同 的 响应 。 当 然 也 可 以 
用 这 个 功能 来 实现 其 他 的 任务 ， 比 如 验证 用 户 权限 和 进行 资源 授权 。 不 过 现在 我 们 还 是 继续 完善 
演示 代码 吧 。 
































(2) 增加 路 由 文件 
下 一 步 就 是 创建 路 由 文件 。 进 入 到 app/routes 文 件 夹 ， 创 建 index.server.routes.js， 代 码 如 下 : 
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module.exports = function(app) { 
Var index = require('../controllers/index.server.controller'); 
app.get('/', index.render); 
}; 
上 述 代 码 第 一 行 再 次 使 用 了 CommonJS 模 块 规范 。 前 面 编写 控制 器 的 时 候 ， 是 使 用 exports 
导出 了 多 个 函数 , 这 里 是 使 用 module .exports 导 出 了 单个 函数 。 第 二 行 包含 了 前 面 创 建 的 控制 
器 ， 第 三 行 以 控制 器 中 的 renaez () 方 法 作为 中 间 件 ， 以 处 理 所 有 发 到 根 路 径 的 GET 请 求 。 


























KW 这 里 的 路 由 函数 需要 一 个 名 为 app 的 参数 ， 因 此 在 调用 的 时 候 ， 需 要 将 
Express 应 用 实例 作为 参数 传 入 。 





接着 便 是 创建 Express 应 用 对 象 , 使 用 控制 器 和 刚刚 创建 的 路 由 模块 进行 引导 。 为 此 , 进入 到 
config 文 件 夹 ， 创 建 express.js 文 件 ， 代 码 如 下 : 


Var express = require('express'); 








module.exports = function() { 
var app = express(); 
require('../app/routes/index.server.routes.js') (app); 
return app; 
ey 
这 上段 代码 中 ， 先 是 包含 了 Express 模 块 ， 然 后 用 CommonJS 的 模块 模式 定义 了 一 个 初始 化 
Express 应 用 的 模块 函数 。 初 始 化 分 为 两 步 ， 一 是 创建 了 Express 应 用 的 实例 ， 二 是 调用 了 前 面 创 
建 的 路 由 文件 ,以 函数 调用 的 方式 传人 了 应 用 实例 。 路 由 文件 中 的 函数 会 为 应 用 实例 调用 控制 器 
的 zenqer () 方 法 来 创建 新 的 路 由 配置 ， 最 后 返回 处 理 好 的 应 用 实例 。 




















KW SO .js 专门 用 于 配置 Express 应 用 ， 所 有 与 Express 应 用 相关 的 配置 也 需要 
添加 到 这 个 文件 中 o 





只 需要 最 后 一 步 ，Express 应 用 就 创建 完成 了 。 在 应 用 根 目 录 中 创建 server.js， 代 码 如 下 : 
Var express = require('./config/express'); 

Var app = express(); 

app.listen(3000); 


module.exports = app; 


console.log('Server running at http://localhost:3000/'); 


这 便 是 程序 主 文件 ， 通 过 包含 Express 配 置 模块 ， 获 取 Express 应 用 对 象 的 实例 ， 并 监听 3000 
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让 

















口 ， 整 个 应 用 便 完成 了 。 
用 命令 行 工具 进入 到 应 用 程序 根 目 录 ， 使 用 npm 安 装 应 用 程序 的 依赖 ， 命 令 如 下 : 


px 


$ npm install 


安装 完成 后 , 便 可 以 启动 应 用 了 : 





$ node server 


应 用 已 经 运行 起 来 了 。 你 可 以 使 用 浏览 器 进入 http://localhost:3000/ 对 它 进行 测试 。 














在 这 个 例子 中 ,我 们 学 到 了 如 何 使 用 合理 的 方式 创建 Express 应 用 。CommonJS 模 块 规范 中 创 
建 模块 的 几 种 方法 是 最 需要 掌握 的 ， 这 贯穿 整个 应 用 ， 后 面 还 将 继续 使 用 。 








3.7 ”Express 应 用 配置 


Express 的 配置 管理 系统 非常 简单 ， 用 它 还 可 以 给 Express 应 用 添加 各 种 功能 。 尽 管 也 有 一 些 
预定 义 的 配置 选项 可 供 操 作 ， 你 也 可 以 使 用 其 他 方式 来 添加 一 个 键 值 存储 的 配置 选项 。Express 
男 一 个 强大 的 功能 是 可 以 根据 运行 环境 来 配置 应 用 ,比如 只 想 在 开发 环境 中 启动 日 志 系 统 , 同时 
在 生产 环境 中 对 响应 的 主体 进行 压缩 等 。 

为 此 ， 就 需要 使 用 process .env 属 性 。 作 为 一 个 全 局 变量 ，process .env 可 以 被 用 来 访问 
预定 义 的 环境 变量 。 其 中 最 常用 的 便 是 用 它 来 访问 NODE_ENV 这 个 环境 变量 。 NODE_ENV 通 常用 于 


设置 与 环境 有 关 的 配置 。 回 到 上 述 关于 日 志和 压缩 的 例子 , 这 两 个 功能 都 涉及 新 的 中 间 件 ,可 以 
通过 添加 依赖 来 下 载 和 安装 。 


编辑 package.json 文 件 ， 代 码 如 下 : 



















































































{ 


"name": "MEAN", 

"versiony: O03 

"dependencies": { 
"express": "~4.8.8", 
We 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0" 


} 
} 


正如 前 文 所 述 ，morgan 模 块 提供 简单 的 日 志 中 间 件 ，compression 提 供 响 应 内 容 的 压缩 
功能 ，body-parser 模 块 包含 几 个 处 理 请 求 数据 的 中 间 件 ，method-override 模 块 提供 了 对 
HTTP DELETE 和 PUT 两 个 遗留 方法 的 支持 。 通过 修改 config/express.js 文 件 来 使 用 这 些 模块 , 代码 


如 下 : 
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Var express = require('express'), 
morgan = require('morgan'), 
compress = require('compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'); 
module.exports = function() { 
Var app = express(); 
if (process.env.NODE ENV === 'development') { 
app.use(morgan('dev')); 
} else if (process.env.NODE ENV === 'production') { 
app.use(compress()); 
} 
app.use(bodyParser.urlencoded({ 
extended: true 
})); 
app.use(bodyParser.json()); 
app.use (methodOoverride()); 
require('../app/routes/index.server.routes.js') (app); 
return app; 
.> 
如 你 所 见 ， 上 述 代码 使 用 了 名 为 process .env .NODE_ENV 的 变量 对 系统 环境 进行 判定 ， 并 
根据 它 对 Express 应 用 进行 配置 。 当 系统 环境 是 开发 环境 时 , 将 使 用 app .use () 方 法 加 载 morgan () 





中 间 件 ， 当 系统 环境 是 生产 环境 时 ， 则 使 用 们 力 法 加 ognsr seat 


中 间 件 。bodyParser. 


() 和 methodoverride() 这 三 个 中 间 件 不 区 分 系统 环境 ， 


urlencoded()、 bodyParser.jsonl 


一 定 会 被 加 载 。 
只 需要 最 后 一 步 ， 








该 应 用 配置 就 完成 了 。 我 们 需要 对 server.js 做 出 相应 修改 ， 代 码 如 下 : 





process.env.NODE ENV = process.env.NODE ENV || 'development'; 


Var express = require('./config/express'); 
Var app = express(); 
app.listen(3000); 


module.exports = app; 


'Server running at http://localhost:3000/'); 


_ENV 的 默认 值 设 为 levelopment ,因为 系统 环境 变量 NODE_] 


console.logl( 





[3 | 
tH 





NV 有 可 能 





la | 





process .enyv .NODI 


是 没有 设置 的 。 
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建议 你 在 运行 应 用 之 前 ， 最 好 对 操作 系统 中 的 NODE_ENV 环 境 变 量 进行 设 
置 。Windows 环 境 中 ， 在 命令 提示 符 中 运行 如 下 命令 即 可 : 








> Set NODE ENV=development 
在 类 Unix 操 作 系 统 中 ， 运 行 如 下 命令 即 可 : 


$ export NODE ENV=development 


来 测试 一 下 上 面 的 修改 吧 。 进 入 到 应 用 根 目录 ， 执 行 如 下 的 命令 来 安装 新 的 依赖 : 

$ npm install 

安装 完成 后 ， 使 用 Node 命 令 行 工 具 运 行 应 用 : 

$ node server 

安装 完成 之 后 ， 你 可 以 在 浏览 器 中 访问 一 下 http:/localhost:3000， 此 时 命令 行 中 便 会 显示 出 
日 志 工 具 的 输出 。 此 外 ， 在 更 为 复杂 的 配置 选项 设置 中 ， 环 境 变 量 process .env.NODE_ENV 会 
更 精确 。 








环境 配置 文件 


在 应 用 开发 过 程 中 ， 由 于 环境 各 异 ， 因 此 需要 对 第 三 方 模块 进行 配置 才能 运行 。 举 例 来 讲 ， 
当 连 接 MongoDB 服 务 器 时 ， 在 开发 环境 和 生产 环境 中 所 使 用 的 连接 字符 串 往 往 是 不 同 的 。 为 了 
对 第 三 方 模块 进行 正确 地 配置 , 往往 就 需要 用 很 多 if 语句 来 判断 ,这样 维护 起 来 会 很 麻烦 。 为 解 
决 这 个 问题 ， 可 以 考虑 使 用 环境 配置 文件 对 不 同 的 配置 进行 管理 ,然后 使 用 
process .env .NODE_ENV 来 确定 所 要 加 载 的 配置 文件 ， 这 样 便 可 以 让 代码 简单 而 又 便于 维护 。 
下 面 来 尝试 一 下 ， 为 默认 的 开发 环境 创建 一 个 配置 文件 。 在 config/env 文 件 夹 中 创建 一 个 名 为 
development.js 的 文件 ， 代 码 如 下 : 



























































module.exports = { 
// Development configuration options 
yy 
上 述 文件 是 一 个 仅 做 了 初始 化 的 CommonJS 模 块 。 不 必 担 心 ， 后 面 将 对 它 进行 配置 添加 。 不 
过 首先 , 还 是 先 来 看 看 怎样 管理 配置 文件 的 加 载 。 进 入 config 目 录 , 创建 一 个 config.js 的 文件 并 在 
新 建文 件 内 输入 如 下 代码 : 























module.exports = require('./env/' + process.env.NODE ENV+ '.js'); 


上 述 文件 会 依据 当前 process .env .NODE_ENV 环 境 变 量 对 配置 文件 进行 导入 。 在 后 面 的 章 
节 中 将 会 使 用 该 文件 来 帮 我 们 导入 正确 的 环境 配置 文件 。 要 想 对 其 他 的 环境 进行 配置 ,只 需要 为 
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其 创建 对 应 的 环境 配置 文件 ， 然 后 通过 正确 配置 NODE_ENV 变 量 对 该 配置 文件 进行 导入 即 可 。 

















3.8” 泻 染 视图 


演 染 视图 是 Web 框 架 的 一 个 基本 功能 。 泻 染 其 实 很 简单 ， 就 是 将 具体 的 数据 传人 模板 引擎 ， 
再 由 模板 引擎 泻 染 出 最 终 视图 ,通常 即 为 HTML。 在 MVC 模 式 中 ， 控 制 器 利用 模型 来 获取 数据 ， 
利用 视图 来 输出 最 终 的 HTML。Express 的 可 扩展 性 让 使 用 多 种 Node.js 模 板 引 擎 实现 这 一 功能 成 为 
可 能 , 在 本 节 中 , 将 使 用 EJS 模 板 引擎 为 例 来 实现 。 不 过 在 了 解 到 EJS 的 使 用 后 ,你 可 以 替换 成 任 
一 其 他 模板 引擎 。 下 图 展示 了 MVC 模 式 中 控制 器 是 如 何 演 染 应 用 视图 的 。 



















































































D> 

请 求 数据 一 2 人 人、 请求 模板 
上 一 接收 数据 | 接收 模板 “一 、 
模型 下 ~ 视图 


res.render() 





HTML 输 出 














MVC 模 式 中 的 演 梁 


Express 有 两 种 方法 执行 演 染 ,一 是 使 用 app .render () ,将 HIML 交 由 一 个 回调 函数 进行 泻 
染 。 更 常用 的 是 第 二 种 ,使 用 res .rengder () ， 将 视图 泻 染 成 HTML 后 直接 作为 响应 输出 。 由 于 
一 般 都 是 直接 输出 HTML， 所 以 第 二 种 方法 使 用 频率 更 高 。 不 过 车 需要 用 Express 应 用 发 送 HTML 
邮件 ， 则 需要 使 用 app .render () 方 法 。 在 开始 讨论 res .render () 之 前 ， 先 来 看 看 怎样 配置 应 
用 的 视图 系统 。 









































3.8.1 配置 视图 系统 

视图 系统 的 配置 是 通过 使 用 EJS 模 板 引 擎 实现 的 。 因 此 ， 配 置 视 图 系统 的 第 一 步 是 安装 EJS 
模板 引擎 。 下 面 先 回 到 前 文 所 述 关 于 模块 安装 的 例子 , 对 EJS 模 块 进行 安装 。 首 先 , 在 packagejson 
中 添加 相应 的 依赖 ， 代 码 如 下 : 























用 
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{ 

"name": "MEAN", 

Wyrersionm. O03", 

"dependencies": { 
"express": "~4.8.8", 
We ra dd 
"compression": "~1.0.11", 
"body-parser": "~1.8.0"， 
"method-override": "~2.2.0", 


"ejs": "~1.0.0" 


} 
然后 安装 新 的 EJS 模 块 。 在 用 命令 


$ npm update 





安装 完成 后 ， 便 可 以 在 Express 中 将 EJS 设 置 为 默认 的 模板 引擎 。 


行 如 下 修改 : 


Var express = require('express'), 
morgan = require('morgan'), 
compress = 'compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'); 


requirel 


module.exports = function() { 
Var app = express(); 
if (Process.env.NODE_ENV === 
app.use (morgan('dev')); 
} else if (process.env.NODE_ENV === 
app.use (compress ()); 


; 


app.use (bodyParser.urlencoded(t{ 
extended: true 
ea; 


app.use (bodyParser.json()); 
app.use (methodOverride()); 


'./app/views'); 
'ejs'); 


app.set('views'， 
app.set('view engine', 


FeGuirel(' 


return app; 


} 


主意 ， 上 述 代码 中 有 两 行使 用 的 是 app . set () 方 法 ， 
置 EJ | 的 模板 引擎 。 下 面 来 创建 视图 。 

















图 灵 社 区 


'development') { 


./app/routes/index.server.routes.js' 


员 打 顺 顺 (lvshun@live.cn) 专 享 


production' 


JR 


进入 应 用 的 根 目录 ， 执 行 如 下 命令 即 可 : 


进入 到 config/express.js， 进 


) 


app); 


一 是 设置 视图 文件 的 存储 目录 , 二 是 设 
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3.8.2” ”EJS 视图 泻 染 


EJS 视 图 由 HTML 代 码 和 EJS 标 签 两 部 分 组 成 。EJS 模 板 文件 以 .ejs 为 扩展 名 ,存储 于 app/views 
文件 夹 中 。 使 用 res .render () 方 法 时 ，EJS 引 擎 会 到 app .set () 方 法 设置 的 views 目 录 中 对 模板 
进行 查找 。 相 符 的 模板 找到 后 便 开 始 对 HTML 代 码 进行 渲染 。 下 面 来 创建 一 个 EJS 视 图 。 进 入 
app/views 目 录 ， 创 建 一 个 名 为 index.ejs 的 文件 ， 并 在 此 新 建文 件 中 输入 如 下 代码 : 


<!DOCTYPE html> 


<html> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
<hl><%= title %></hl> 
</body> 
</html> 


除 <s= sg> 标 签 外 ， 上 述 代码 大 部 分 都 是 HTML 代 码 。 该 标签 是 用 来 告诉 EJS 模 板 引 擎 ， 标 签 
内 就 是 需要 替换 的 模板 变量 ， 即 为 示例 中 的 title 变 量 。 这 里 要 做 的 便 是 配置 控制 器 去 泻 染 模板 
并 自动 将 其 转换 为 HIML 啊 应 输出 。 为 此 ， 需 要 修改 控制 器 。 打 开 app/controllers/index. 
server.controllerjs 文 件 ， 并 进行 如 下 修改 : 






























































exports.render = function(req, res) { 
res.render('index', { 
title: 'Hello World' 
: 
}; 
注意 上 述 代码 中 res .render () 方 法 的 用 法 ， 其 中 第 一 个 参数 是 EJS 模 板 文件 名 中 去 掉 扩 展 
名 的 部 分 ， 第 二 个 参数 是 包含 有 模板 变量 的 对 象 。res .render () 方 法 使 用 EJS 引 擎 ， 到 上 文 提 
及 的 config/express.js 中 app.set ('views'，dirpath) 设 置 的 views 文 件 夹 下 搜索 对 应 的 模板 文 
件 ， 再 使 用 传人 的 模板 对 象 进行 替换 。 修 改 完 后 ， 启 动 Express 应 用 对 上 述 修改 进行 测试 : 


$ node server 
EJS 视 图 便 创建 完成 了 。 通过 浏览 器 访问 http://localhost:3000, 你 便 可 以 看 到 泻 染 后 的 HTML。 


EJS 视 图 简单 而 又 便于 维护 ， 它 为 创建 应 用 视图 提供 了 一 种 简便 可 行 的 方法 。 这 里 只 是 简单 
绍 了 EJS 视 图 的 使 用 ,在 后 面 的 章节 中 ,还 将 会 讲述 更 多 关于 EJS 模 板 的 内 容 。 不过， 在 MEAN 
用 中 ， 大 部 分 的 HTML 演 染 工 作 ， 其 实 是 在 客户 端 由 AngularJS 完 成 的 。 


















































加 字 





3.9 静态 文件 服务 


在 任何 一 个 Web 应 用 中 ,都 会 需要 提供 静态 文件 服务 .Express 通 过 预 置 的 express.static() 
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中 间 件 来 提供 这 一 功能 。 回 到 上 文 所 述 的 例子 , 添加 静态 文件 服务 功能 。 首先 , 对 config/express.js 
文件 进行 如 下 修改 : 


Var express = require('express'), 
morgan = require('morgan'), 
compress = require('compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'); 
module.exports = function() { 
Var app = express(); 


if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE ENV === 'production') { 


app.use (compress ()); 


} 


app.use (bodyParser.urlencoded(t{ 
extended: true 

})); 

app.use (bodyParser.json()); 


( 
app.use (methodOverride()); 
app.set ('views', './app/views'); 
app.set ('view engine', 'ejs'); 
require('../app/routes/index.server.routes.js') (app); 


app.use (express.static('./public')); 


return app; 
过 


express.static() 中 间 件 函数 需要 一 个 参数 , 用 于 指定 静态 文件 所 在 的 文件 夹 路 径 。 注意 
中 间 件 启动 的 位 置 ， 它 位 于 路 由 中 间 件 之 下 ， 即 先 执行 路 由 逻辑 。 路 由 逻辑 没有 响应 请 求 的 话 ， 
再 由 静态 文件 服务 进行 处 理 。 这 样 做 的 原因 是 ,静态 文件 服务 在 文件 系统 中 进行 路 径 和 文件 检索 ， 
需要 消耗 时 间 在 VO 操作 上 ， 这 便 会 增加 一 般 的 路 由 中 间 件 的 响应 时 间 。 


为 测试 静态 文件 服务 中 间 件 ， 在 public/img 中 增加 一 张 名 为 logo.png 的 图 片 ， 然 后 在 
app/views/index.ejs 中 进行 如 下 修改 : 











<!DOCTYPE html> 
<html> 
<head> 
<title><%= title %></title> 
</head> 
<body> 
<img src="img/logo.png" alt="Logo"> 
<h1l><%= title %></hl> 
</body> 
</html> 
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然后 用 命令 行 启动 Express 应 用 对 以 上 修改 进行 测试 : 
$ node server 


接 下 来 通过 浏览 器 访 问 http://localhost:3000， 你 便 可 以 在 网 页 中 看 到 Express 以 静态 文件 服务 
提供 的 图 片 文件 。 


3.10 配置 会 话 


会 话 的 常见 功能 是 对 Web 应 用 访客 的 行为 进行 跟踪 。 添 加 这 一 功能 之 前 , 需要 在 Express 中 安 
装 sxpress-session 中 间 件 。 首 先 ， 对 packagejson 文 件 进行 如 下 修改 : 


{ 























"name": "MEAN", 
Teelion ms VO.03T, 
"dependencies": { 
"express": "~4.8.8", 
"morgan a Wel .0 
"ompression": ™~1.0.11"™, 
"body-parser": "™~1.8.0", 
"method-override": "~2.2.0", 
邮 "express-session": "~1.7.6", 
电 "ejs": "~1.0.0" 


} 


接 下 来 ， 安装 express-session 模 块 。 使 用 命令 行进 入 应 用 程序 根 目 录 ， 执 行 NPM 命 令 
即 可 。 








$ npm update 


安装 完成 后 , 便 可 以 配置 Express 来 使 用 express-session 模 块 ,该 模块 通过 浏览 器 的 cookie 
来 存储 用 户 的 唯一 标识 。 为 了 标记 会 话 ， 需 要 使 用 一 个 密 钥 ， 这 可 以 有 效 防止 恶意 的 会 话 污染 。 
为 了 安全 起 见 ， 建 议 在 不 同 的 环境 中 使 用 不 同 的 cookie 密 钥 ， 这 就 涉及 根据 环境 加 载 不 同 的 配置 
文件 。 打 开 config/env/development.js 文 件 ， 对 其 进行 如 下 修改 : 








module.exports = { 

sessionSecret: 'developmentSessionSecret' 
过 
你 可 以 对 上 述 示例 中 密 钥 字符 进行 修改 。 然 后 , 在 其 他 环境 的 配置 文件 添加 sessionSecret 
这 一 属性 即 可 。 使 用 上 述 配置 文件 对 Express 应 用 进行 配置 ， 首先， 打开 config/express.js 文 件 ， 并 
对 其 进行 以 下 修改 : 








var config = require('./config'), 
express = require('express'), 
morgan = require('morgan'), 
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bodyParser 
methodOverride 


mo 


}3 


require('compression'), 
require('body-parser'), 


Compress 


session 


{ 


dule.exports function() 
var app express (); 


if (process.env.NODE_ENV === 

app.use (morgan('dev')); 

} else if (process.env.NODE_ENV === 
app.use (compress ()); 


app.use (bodyParser.urlencoded({ 
extended: true 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


app.use(session({ 
saveUninitialized: true, 
resave: true, 
secret: config.sessionSecret 
})); 


'./app/views'); 
ej 


app.set ('views', 
app.set ('view engine', 


'development') 


require('method-override'), 
require('express-session'); 


{ 


'production') 


{ 


require('../app/routes/index.server.routes.js') (app); 


app.use (express.static('./public')); 


return app; 

















请 注意 上 述 示例 中 的 配置 对 象 是 如 何 传 给 express .session() 中间 件 的 。 该 配置 对 象 中 的 


SOCLE 


增加 一 个 session 对 象 , 通过 这 个 session 对 象 , 可 以 设置 或 者 获取 当前 会 话 的 任 








七 





属性 被 定义 为 前 文 修改 的 配置 文件 中 的 值 。session 中 间 件 会 为 应 用 中 所 有 的 请 求 对 象 


Se 


意 属 性 。 


下 面 


TT 





来 测试 一 下 ， 修 改 app/controller/index.server.controller.js 文 件 如 下 : 


exports.render 


function(req, res) { 


{ 


if (req.session.lastVisit) 


console.log(req.session.lastVisit); 


req.session.lastVvisit new Date(); 
res.render('index', { 

title: 'Hello World' 
2 
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上 述 代 码 记录 了 用 户 最 后 一 次 请 求 时 间 。 控 制 占 会 先 检查 session 对 象 中 是 否 包 含 
lastVisit 这 一 属性 。 如 果 包 含 ， 就 将 该 时 间 输 出 到 终端 ， 然 后 把 lastvisit 属 性 设置 为 当前 
时 间 。 使 用 命令 行 运行 如 下 命令 对 上 述 修改 进行 测试 : 






































$ node server 


接 下 来 你 便 可 以 用 浏览 器 访问 http://localhost:3000, 通过 查看 命令 行 输 出 对 该 应 用 进行 测试 。 


3.11 总 结 


本 章 讲述 了 如 何 创建 Express 应 用 以 及 如 何 对 其 进行 合理 配置 ， 并 介绍 了 如 何 对 文件 和 文件 
夹 进行 组 织 管理 。 还 讲述 了 如 何 创建 Express 控 制 器 以 及 如 何 利用 Express 的 路 由 机 制 访问 控制 
器 。 此 外 , 还 讲述 了 如 何 进行 EJS 视 图 泻 染 以 及 如 何 使 用 静态 文件 服务 。 本 章 最 后 还 讲述 了 如 何 
使 用 express-session 模 块 来 跟踪 用 户 行为 。 下 一 章 将 会 讨论 如 何 使 用 MongoDB 将 应 用 的 数 
据 持 久 化 。 
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MongoDB 是 一 个 让 人 有 眼前 一 亮 的 新 型 数据 库 。 近 年 来 业内 兴起 的 NoSQL 潮 流 是 一 种 有 效 的 
数据 库 解 决 方案 , 而 MongoDB 绝 对 是 这 一 潮流 的 领头 羊 。 源 于 Web 应 用 的 设计 理念 , 强大 的 生产 
力 , 独一无二 的 数据 模型 ,简易 的 可 扩展 架构 , 使 得 MongoDB 成 为 Web 开 发 人 员 进 行 数据 持久 化 
的 最 佳 选择 。 从 关系 数据 库 转 换 到 NoSQL 解 决 方案 是 一 个 颇具 挑战 的 工作 ， 而 理解 MongoDB 的 
设计 目标 则 有 助 于 简化 这 一 过 程 。 本 童 内 容 包 括 : 


口 理解 NoSQL 和 MongoDB 的 设计 目标 
口 MongoDB 的 BSON 数 据 结 构 

口 MongoDB 的 集合 与 文档 

口 MongoDB 查 询 语言 

口 MongoDB 命 令 行 工具 的 使 用 






































4.1 NoSQL 简介 


在 过 去 很 长 一 段 时 间 里 ，Web 开 发 人 员 一 般 使 用 关系 型 数据 库存 储 持久 化 数据 。 大 多 数 开发 
人 员 已 经 掌握 了 某 一 种 SQL 解决 方案 ， 使 用 成 熟 的 关系 数据 库存 储 规范 化 数据 模型 已 成 为 标准 。 
开发 人 员 需 要 在 应 用 的 不 同 部 分 之 间 进 行 数据 调度 ， 对 象 关系 映射 便 应 运 而 生 。 但 随 着 Web 应 用 
规模 越 来 越 大 , 开发 人 员 面 对 的 可 扩展 性 问题 越 来 越 突 出 。 为 此 , 社区 里 出 现 了 大 量 针 对 更 高 可 
用 性 、 查 询 简 便 性 和 水 平 扩展 性 而 设计 的 键 值 存储 解决 方案 这些 新 的 数据 存储 方式 越 来 越 完善 ， 
也 提供 了 很 多 关系 型 数据 库 的 特性 。 在 这 一 演变 中 ， 出 现 了 各 种 存储 设计 模式 ， 包 括 键 值 存储 、 
列 存储 、 对 象 存储 以 及 最 流行 的 文档 存储 。 


在 常见 的 关系 数据 库 中 ,数据 存储 在 不 同 的 表 中 , 表 与 表 之 间 用 主键 和 外 键 进 行 关 联 。 程 序 
在 使 用 数据 时 ， 先 使 用 各 种 SQL 语句 获取 数据 ， 再 以 一 种 类 似 层 级 对 象 的 方式 组 织 数据 。 与 关系 
数据 库 的 表格 不 同 ， 面 向 文档 的 数据 库 直 接 使 用 JSON 或 XML 之 类 的 标准 格式 来 存储 层级 组 织 的 
文档 。 
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为 了 更 好 地 理解 ,我 们 以 一 篇 博客 文章 为 例 进行 说 明 。 如 果 用 关系 数据 库 , 一 般 需要 使 用 两 
张 表 ， 其 中 一 个 用 于 存储 文章 ， 另 一 个 用 于 存储 文章 评论 ， 结 构 类 似 于 下 图 : 


博文 表格 





评论 表格 


PostiD 














使 用 关系 数据 库存 储 的 博客 文章 与 评论 


在 应 用 中 , 可 以 使 用 MySQL 对 象 关系 映射 类 库 , 或 者 直接 使 用 SQL 语言 查询 文章 记录 与 评论 
记录 , 构建 出 相应 的 博客 文章 对 象 。 但 在 面向 文档 的 数据 库 中 , 博客 文章 将 会 存储 到 单个 文档 中 
以 供 查 询 。 以 JSON 存 储 的 文档 为 例 ， 博 客 文章 可 以 以 如 下 格式 存储 : 

{ 


"tt "FLIESt BLOG. BGS 
"comments": [ 


























] 
) 
上 述 例子 揭示 了 面向 文档 数据 库 与 关系 数据 库 的 主要 不 同 。 可 以 看 出 , 在 关系 数据 库 中 , 数 
据 存储 在 不 同 的 表 里 ， 并 通过 表格 的 记录 ( 行 ) 来 构建 应 用 中 的 对 象 。 然而 , 使 用 整体 性 的 文档 
存储 , 不仅 可 以 加 快 读 取 操作 ,， 读 取 完 成 后 也 不 用 重新 构建 对 象 。 此 外 ， 面 向 文档 的 数据 库 还 有 
很 多 其 他 优点 。 


在 应 用 开发 中 ,经 常会 碰 到 修改 模型 的 问题 。 比 如 ,给 每 篇 博文 添加 新 属性 。 如 果 用 的 是 关 
系数 据 库存 储 , 那么 首先 需要 修改 表格 结构 ,再 到 应 用 的 数据 层 给 博文 对 象 添 加 属性 。 如 果 存 在 
多 篇 博文 , 那么 还 需要 对 每 一 篇 都 进行 修改 。 这 就 是 说 , 模型 修改 之 后 我 们 不 仅 要 修改 代码 ,还 
要 用 专门 的 验证 程序 验证 所 有 代码 。 相 反 ， 面 向 文档 的 数据 库 往往 是 无 模式 的 ， 如 果 要 在 某 个 集 
合 中 存储 不 同 的 对 象 , 直接 存储 即 可 , 不 需要 对 数据 库 做 任何 修改 。 可 能 对 于 一 些 经 验 丰富 的 开 
发 人 员 开 说 ， 无 模式 存储 无 疑 是 自 找 麻烦 ， 但 就 自由 度 而 言 ， 该 存储 方式 仍 有 很 大 优势 。 


以 一 个 二 手 家 具 电 商 为 例 , 产品 表 需 要 存储 的 内 容 非 常 复 杂 。 椅子 和 壁 柜 具有 一 些 共同 的 特 
点 ， 比 如 木料 类 型 。 但 对 于 壁 柜 ,用 户 更 关心 的 是 壁 柜 门 的 个 数 ， 如 果 把 椅子 和 壁 柜 存 储 在 关系 
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数据 库 的 表 里 ， 要 么 用 一 张 表 存储 , 那 将 有 很 多 字段 是 空 的 ， 要 么 用 另 一 张 表 存储 键 值 属性 ， 再 
用 实体 -属性 - 值 模式 去 对 应 。 但 如 果 使 用 无 模式 存储 , 就 可 以 在 一 个 集合 中 对 不 同 对 象 定义 不 同 
属性 。 并 且 不 同 的 对 象 还 可 以 有 类 似 于 木料 类 型 之 类 的 通用 属性 , 查询 时 也 更 加 方便 。 无 模式 存 
储 同 时 还 意味 着 在 应 用 内 便 可 以 强制 修改 数据 结构 ， 而 不 需要 在 数据 库 中 操作 , 这 将 大 大 缩短 开 
发 过 程 。 

大 量 针 对 不 同 问题 的 NoSQL 解 决 方案 通常 都 围绕 着 缓存 和 规模 问题 。 在 这 些 解决 方案 中 , 面 
向 文档 的 数据 库 逐 渐 成 为 NoSQL 潮 流 中 的 主流 。 它们 使 用 简单 ,并 提供 独立 的 持久 化 存储 ,其 至 
开始 在 一 些 领域 挑战 传统 关系 数据 库 的 统治 地 位 。 面 向 文档 的 数据 库 类 型 可 谓 百 花 齐 放 , 而 其 中 
最 显著 的 当 属 MongoDB。 






























































4.2 MongoDB 简介 


2007 年 ，Dwight Merriman 和 Eliot Horowitz 创 立 了 10gen， 致 力 于 开发 一 个 更 好 地 为 Web 应 用 
提供 服务 的 虚拟 主机 平台 。 平台 以 服务 的 形式 提供 托管 , 让 开发 人 员 能 将 精力 放 在 开发 上 ， 而 不 
是 忙于 硬件 管理 和 基础 设施 扩展 。 但 是 很 快 他 们 发 现 , 开发 人 员 并 不 想 放弃 对 基础 设施 的 诸多 控 
制 。 最终， 他 们 将 平台 的 各 个 部 分 分 别 进行 了 开源 。 


MongoDB 是 这 些 开 源 项 目 之 一 ， 它 是 一 个 基于 文档 的 数据 库 解 决 方案 。MongoDB 的 名 字源 
于 humongous。 它 在 提供 对 复杂 数据 存储 支持 的 同时 ， 还 保持 着 其 他 NoSQL 存 储 的 高 性 能 。 社 区 
很 快 便 将 注意 力 转 向 这 一 新 典范 ， 于 是 ，MongoDB 成 了 世界 上 增长 最 快 的 数据 库 。 拥 有 至 少 150 
个 参与 者 ， 超 过 10 000 次 提交 ，MongoDB 成 为 了 世界 上 最 火热 的 开源 项 目 之 一 。 


MongoDB 的 主要 目标 是 创建 一 个 既 有 关系 数据 库 的 鲁 棒 性 ， 又 能 通过 分 布 式 扩展 快速 提升 
键 值 存储 生产 力 的 数据 库 。 基 于 可 扩展 平台 的 理念 ，MongoDB 可 在 保持 与 传统 数据 库 同等 持久 
性 的 同时 , 进行 简单 的 水 平 扩展 。MongoDB 另 一 个 重要 目标 是 支持 以 标准 化 的 JSON 输 出 进行 Web 
应 用 开发 。 这 两 个 设计 目标 成 为 了 MongoDB 与 其 他 解决 方案 相 比 最 大 的 优势 ， 而 且 恰 好 迎合 了 
Web 开 发 的 发 展 潮流 ， 比 如 几乎 无 处 不 在 的 虚拟 化 云 计算 ， 还 有 取代 垂直 扩展 的 水 平 扩 展 。 


MongoDB 大 步 超 越 了 孕育 它 的 平台 ， 成 为 第 一 个 被 视 为 比 关系 数据 库 更 可 行 的 NoSQL 数 据 
存储 层 。 其 生态 系统 拥有 大 量 社区 开发 的 支持 ， 已 经 对 大 多 数 编程 平台 提供 了 支持 。 与 此 同时 ， 
与 MongoDB 配 套 的 各 类 工具 也 已 成 型 ， 如 MongoDB 客 户 端 工具 、 性 能 分 析 与 优化 工具 、 管 理 与 
维护 工具 等 ， 还 有 大 量 已 经 取得 VC 投资 的 MongoDB 托 管 服务 。 甚 至 诸如 eBay、《 纽 约 时 报 》 等 
公司 都 开始 将 MongoDB 运 用 到 生产 环境 。 为 何 开发 人 员 这 么 偏爱 MongoDB? 让 我 们 来 看 看 
MongoDB 的 一 些 关 键 特 性 。 
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4.3 MongoDB 的 关键 特性 


MongoDB 如 此 受 欢 迎 ， 主 要 原因 在 于 它 的 一 些 关键 特性 。 前 面 曾 提 到 ，MongoDB 的 设计 目 
标 在 于 兼 具 传统 数据 库 特 性 以 及 NoSQL 存 储 的 高 性 能 。 因 此 ，MongoDB 的 关键 特性 在 于 消除 了 
其 他 NoSQL 解 决 方案 在 集成 关系 数据 库 特性 时 的 限制 。 本 节 将 讨论 MongoDB 的 这 一 特性 。 























4.3.1 BSON 格 式 


MongoDB 最 重要 的 特性 是 类 JSON 的 数据 存储 格式 一 一 BSON ( Binary JavaScript Object 
Notation， 二 进 制 JavaScript 对 象 标 写法 )。 该 特性 就 是 将 类 JSON 文 档 序列 化 后 进行 二 进 制 编码 ， 
它 在 设计 之 初 便 很 讲究 大 小 与 性 能 方面 的 高 效 ， 使 得 MongoDB 可 以 高 吞吐 率 地 进行 读 / 写 操作 。 


BSON 和 JSON 一 样 ， 是 一 种 简单 的 对 象 和 数组 键 值 格式 表示 方法 。 一 个 BSON 文 档 包 含 多 个 
元 素 ， 每 个 元 素 包 括 一 个 字符 类 型 的 字段 名 和 一 个 特定 类 型 的 字段 值 。 这 些 文档 除了 支持 JSON 
的 特殊 数据 类 型 ， 还 支持 其 他 几 种 数据 类 型 ， 比 如 时 间 类 型 Date。 


使 用 _idq 做 主键 是 BSON 格 式 的 另 一 大 优点 。 iaq 字 段 通常 是 以 objectIa 为 名 的 唯一 标签 符 。 
它 要 么 由 应 用 驱动 生成 ， 要 么 由 mongod 服 务 生 成 。 当 驱动 没有 提供 _id 时 ，mongod 服 务 将 会 自 
动 生成 ， 生 成 的 字段 包括 : 


口 4 位 的 UNIX 时 间 戳 

口 3 位 的 机 器 码 

口 2 位 的 进程 编号 

口 3 位 的 计数 器 码 ， 计 数 器 是 从 一 个 随机 数 开始 计数 的 


上 文 提 及 的 博客 文章 如 果 用 BSON 存 储 ， 将 会 是 下 面 这 样 : 


{ 
"_id": ObjectId("52d02240e4b01d67d71ad577")， 
"titlé": "First BLOG Post", 
"comments": | 






















































































] 
} 


BSON 使 得 MongoDB 能 够 使 用 内 部 索引 ,并 可 映射 到 文档 属性 , 就 算是 内 构 的 文档 也 没 问 题 ， 
它 提 高 了 搜索 集合 的 性 能 。 更 为 重要 的 是 ， 它 还 支持 使 用 复杂 查询 表达 式 来 匹配 对 象 。 











4.3.2 ”MongoDB 即 席 查询 








MongoDB 的 另 一 个 设计 目标 便 是 扩展 常规 键 值 的 存储 功能 。 键 值 存储 的 主要 问题 在 于 查询 
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能 力 太 有 限 , 通 销 情况 下 只 能 用 主要 字段 查询 ,更 复杂 的 查询 则 多 半 要 预先 进行 定义 。 为 解决 这 
个 问题 ，MongoDB 从 关系 数据 库 的 动态 查询 语言 借鉴 了 设计 灵感 。 

支持 即席 查询 意味 着 并 不 需要 对 每 个 查询 进行 预先 定义 , 数据 库 会 响应 各 种 不 同 的 结构 化 查 
询 。 这 一 目标 , 使 用 建立 索引 的 BSON 文 档 以 及 MongoDB 独 一 无 二 的 查询 语言 就 可 以 实现 。 先 来 
看 一 个 SQL 语句 : 

SELECT * FROM Posts WHERE Title LIKE '%mongo%'; 

上 面 这 一 简单 的 SQL 语句 将 从 数据 库 中 查询 标题 中 包含 mongo 的 所 有 博文 记录 。 该 查询 在 
MongoDB 中 则 是 这 样 完成 的 : 


























db.posts.find({ title:/mongo/ }) 


在 MongoDB 命 令 行 工具 中 运行 该 查询 , 便 可 获取 到 所 有 标题 中 包含 mongo 的 博文 。 本章 后 面 
的 内 容 将 包含 更 多 关于 MongoDB 查 询 语言 的 内 容 。 现 在 需要 明确 的 一 点 是 ，MongoDB 可 以 像 传 
统 的 关系 数据 库 那 样 进行 查询 。MongoDB 的 查询 语言 非常 强大 ， 但 随 着 数据 库 的 增 大 ， 随 之 而 
来 的 问题 便 是 怎样 在 大 量 的 数据 中 进行 高 效 查询 。MongoDB 提 供 了 索引 机 制 来 解决 这 一 问题 。 

















4.3.3 ”MongoDB 索 引 


索引 是 帮助 数据 库 引 擎 高 效 执行 查询 的 独特 数据 结构 。 当 数据 库 收 到 查询 请 求 时 , 便 会 对 整 
个 集合 进行 扫描 ,以 便 找 到 与 查询 匹配 的 文档 。 这样 一 来 , 数据 库 引 擎 便 会 生成 一 大 堆 不 必要 的 
数据 ， 影 响 数据 库 性 能 。 


为 加 速 扫描 , 数据 库 引 擎 可 以 使 用 预先 定义 的 索引 , 索引 可 以 帮助 引擎 快速 地 在 查询 语句 和 
文档 字段 之 间 匹 配 。 为 了 理解 索引 是 如 何 工 作 的 ， 可 以 试 着 查询 一 下 所 有 评论 超过 10 条 的 博文 ， 
文档 定义 如 下 : 

{ 

"ia": Object1d("52902240e4b01967971ad577")， 


"Edtle vs VFLrFSt BLOG. SET 
"comments": | 



































二 
"commentsCount": 12 


} 

用 MongoDB 查 询 评论 多 于 10 条 的 博文 的 查询 语句 如 下 : 

db.posts.find({ commentsCount: { S$gt: 10 } }); 

为 了 执行 这 个 查询 ，MongoDB 将 遍历 所 有 的 博文 ， 以 检查 其 commentscount 是 否 大 于 10。 


但 如 果 定 义 了 commentscount 的 索引 ,MongoDB 便 只 需 检 查 哪些 博文 的 commentscount 字 段 大 
于 10， 下 图 展示 了 索引 的 运行 过 程 : 
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Comments _ Count 索引 博文 集合 
最 大 一 
Document 1: {..., “commentsCount®: 1} 
人 \ 
NS Document 2:{ .commentsCount : 13} 


NE Document 3:{ --..。commentsCount : 4} 








站 | Document 4:{ .commentsCount : 11} 
Document 5: { .CommentsCount : 7} 
5 A Document 6: { ..., -commentsCountr: 4 
AN 
\ Document 7: {..., “commentsCount”: 5} 
10 -一 SO 


NA Document 8;{..,, "commentsCount"; 17) 


Document 9; {..., “commentsCount”; 13} 





Document 10: { .... "commentsCount": 8} 


最 小 一 











MongoDB 索 引 机 制 


4.3.4 MongoDB 副 本 集 


MongoDB 使 用 副本 集 (Replica Set ) 架构 来 提供 数据 元 余 和 提升 可 用 性 。 数 据 库 的 副本 既 可 
以 用 来 应 对 硬件 故障 ， 又 可 以 提升 数据 库 的 读 取 性 能 。 一 个 副本 集 就 是 多 个 MongoDB 服 务 运 行 
同一 个 数据 库 。 其 中 一 个 作为 活跃 节点 (Primary ), 其 余 的 被 称 为 备份 节点 ( Secondaries )。 副 本 
集 内 的 所 有 实例 均 可 以 实现 读 取 操作 , 但 是 只 有 活跃 节点 可 以 进行 写 人 操作 。 当 一 个 写 和 人 操作 发 
生 时 , 活跃 节点 会 将 变化 告知 各 个 备份 节点 ， 并 确保 各 个 备份 节点 数据 库 都 能 够 完成 修改 。 下 图 
描述 了 这 一 过 程 : 






























































读 写 
活跃 节点 
备份 节点 备份 节点 














拥有 一 个 活跃 节点 和 两 个 备份 节点 的 副本 集 工作 流程 
MongoDB 副 本 集 的 另 一 个 鲁 棒 性 特点 便 是 自动 恢复 。 只 要 集 内 任何 一 个 成 员 与 活跃 节点 断 
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开 连 接 超过 10 秒 , 副本 集 便 会 从 多 个 备份 节点 实例 中 选择 并 推举 一 个 作为 活跃 节点 。 当 之 前 的 活 
跃 节 点 再 次 连接 上 时 ， 将 会 作为 备份 节点 实例 加 入 副本 集中 。 

复制 是 MongoDB 非 常 稳健 的 特性 ， 该 特性 直接 源 于 孕育 它 的 平台 。 也 正 是 这 一 特性 ， 使 
MongoDB 真 正 可 以 用 于 生产 环境 一 一 当然 ， 这 还 有 其 他 特性 的 功劳 。 





























| 你 可 以 通过 访问 http://docs.mongodb.org/manual/replication/ 详 细 了 解 副 本 集 。 | 


4.3.5 ”MongoDB 分 片 


随 着 Web 应 用 的 增加 ， 可 扩展 性 是 必然 要 面 对 的 问题 。 解 决 这 一 问题 的 思路 分 为 两 种 : 垂直 
扩展 和 水 平 扩展 。 二 者 的 区 别 可 以 通过 下 图 来 说 明 : 






































垂直 扩展 : 水 平 扩展 
更 大 的 硬盘 

更 多 CPU 

; 机 器 1 。 机 器 2 
更 多 内 存 





























单机 垂直 扩展 与 多 机 水 平 扩展 


垂直 扩展 比较 简单 ， 为 了 应 对 更 高 的 负载 ， 只 需要 针对 单 台 服务 器 增加 CPU 和 内 存 之 类 的 资 
源 即 可 。 但 是 这 种 方法 存在 两 个 主要 缺点 。 首 先 ， 对 某 些 级 别 来 讲 ， 将 负载 分 散 到 多 个 小 的 机 器 
上 ， 比 增加 单个 机 顺 资 源 消耗 的 成 本 更 低 ， 获 得 的 效益 更 高 。 其 次 ， 现 在 流行 的 云 计算 对 单个 主 
机 实例 的 大 小 有 限制 。 因 此 ， 垂 直 扩 展 只 能 在 规定 的 范围 之 内 使 用 。 

相对 而 言 水 平 扩展 更 为 复杂 。 它 通过 增加 服务 器 来 实现 ， 每 个 服务 器 承担 一 部 分 负载 ， 从 而 
提供 更 好 的 整体 性 能 。 对 数据 库 进 行 水 平 扩展 的 问题 在 于 如 何 将 数据 分 配 到 各 个 服务 器 , 以 及 如 
管理 它们 之 间 的 读 / 写 操作 。 

MongoDB 通 过 分 片 来 支持 水 平 扩展 。 分 片 (sharding ) 就 是 将 数据 分 散 到 不 同 服务 器 上 的 过 
程 。 每 片 负责 一 部 分 数据 ,功能 上 相当 于 一 个 单独 的 数据 库 。 多 个 分 片 的 集合 在 一 起 组 成 一 个 单 
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一 的 逻辑 数据 库 。 所 有 的 操作 都 通过 名 为 查询 路 























( Query Routers ) 的 服务 进行 ， 由 这 个 服务 来 


查询 配置 服务 器 ， 青 将 具体 的 请 求 发 往 某 一 个 分 片 。 





| NW 你 可 以 通过 访问 http://docs.mongodb.org/manual/sharding/ 进 一 步 了 解 分 片 。 | 























上 面 这 些 特性 使 得 MongoDB 日 渐 流行 。 虽然 也 存在 一 些 其 他 替代 方案 ,但 是 使 用 MongoDB 
的 开发 人 员 越 来 越 多 ，MongoDB 逐 渐 成 为 了 NoSQL 解 决 方案 的 领导 者 。 概 述 就 到 这 里 ， 下 面 将 





进行 深入 探讨 。 


4.4 ”MongoDB 命令 行 工 具 














在 第 1 章 中 , 我 们 在 本 地 搭建 了 一 个 MongoDB 环 境 , 还 介绍 了 如 何 使 用 MongoDB 命 令 行 工具 














三 











与 服务 实例 交互 。MongoDB 命 令 行 工具 就 
的 命令 行 工具 。 


全 


个 月 

















有 JavaScript 语 法 的 查询 语句 执行 各 种 不 同 操作 








在 介绍 MongoDB 各 部 分 之 前 ， 先 来 看 看 MongoDB 命 令 行 工具 的 使 用 ， 在 命令 行 中 执行 如 下 


命令 来 启动 它 : 


$ mongo 

















如 果 MongoDB 安 装 无 误 ， 你 将 会 看 到 一 个 与 下 图 相似 的 窗口 输出 : 





®@ S) Amos — mongo 一 80x24 


Amoss-MacBook-Pro:~ Amos$ mongo 
MongoDB shell version: 2.4.8 
connecting to; test 


> 
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上 述 输出 显示 了 目前 使 用 的 MongoDB 命 令 行 的 版 本 ， 并且 该 命令 行 已 经 成 功 连接 到 默认 test 
数据 库 。 





4.5 MongoDB 数据 库 


每 个 MongoDB 服 务 器 实例 可 以 存储 多 个 数据 库 。 连 接 MongoDB 服 务 器 时 不 指定 数据 库 ， 便 
会 自动 连接 到 默认 的 test 数 据 库 。 使 用 下 面 的 命令 即 可 将 连接 的 数据 库 切换 到 一 个 名 为 mean 的 数 
据 库 : 


> USe mean 


接着 命令 行 输出 便 会 提示 你 该 命令 行 工具 已 成 功 切 换 到 mean 数 据 库 。 请 注意 , 在 使 用 数据 库 
之 前 ， 你 并 不 需要 事先 创建 数据 库 。 原 因 是 ， 在 实际 MongoDB 应 用 中 ， 只 有 当 你 往 集 合 里 进行 
文档 插入 时 ， 数 据 库 和 集合 才 会 自动 创建 ， 这 是 因为 MongoDB 处 理 数 据 是 动态 的 。 另 外 一 种 将 
MongoDB 命 令 行 工具 连接 到 指定 数据 库 的 方法 是 在 启动 MongoDB 命 令 行 工 具 时 ， 将 所 要 指定 的 
数据 库 名 作为 mongo 的 参数 。 如 下 所 示 


















































$ mongo mean 


命令 行 工具 会 自动 连接 到 mean 数 据 库 。 如 果 要 列 出 当前 连接 服务 器 上 的 所 有 数据 库 , 运行 如 
下 命令 即 可 : 





> Show dbs 


上 述 命令 将 会 列 出 所 有 当前 存 有 文档 的 可 用 数据 库 。 





4.6 MongoDB 集合 


MongoDB 集 合 就 是 MongoDB 文 档 的 列表 , 类 似 于 关系 数据 库 中 的 表 。 集合 在 插入 第 一 个 文 
档 时 自动 创建 。 与 关系 数据 库 中 的 表 不 同 的 是 ， 集 合 可 以 存储 不 同 结构 的 文档 ， 并 不 强制 类 型 
模式 。 

要 处 理 MongoDB 和 集合 的 操作 ， 需 要 使 用 集合 方法 。 下 面 创建 一 个 posts 集 合 ， 并 插入 第 一 个 
博文 文档 ， 在 MongoDB 命 令 行 工 具 中 执行 如 下 命令 : 

> db.posts.insert({"title":"First Post", "user": "bob"}) 

命令 执行 后 posts 集 合 就 会 被 自动 创建 出 , 并 插入 第 一 个 文档 。 要 检索 集合 中 所 有 的 文档 , 运 
行 如 下 命令 即 可 : 


> db.posts.find() 
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偷 出 : 


你 将 会 看 到 一 个 与 下 图 相似 的 命令 行 输 





Amos 一 mongo 一 80x24 


db.posts.findO) 
{ "id" : ObjectId("52f74b22a11b84189220014d"), "title" :; "First Post", "user™" ; 


bob" } 


> 











hf 入 了 第 一 个 文档 。 





成 功 创建 了 posts 集 合并 在 该 集合 中 撒 























这 表明 你 已 经 

要 查看 所 有 可 用 的 集合 ， 在 MongoDB 命 令 行 工 具 中 执行 如 下 命令 即 可 : 

> Show collections 

MongoDB 命 令 行 工具 会 输出 所 有 可 用 的 集合 ,在 这 里 ， 除 了 刚刚 创建 的 posts ， 还 会 有 一 个 
E 人 





存储 当前 数据 库 内 所 有 索引 的 system.indexes 


如 果 要 删除 posts 集 合 ， 执 行 azrop () 命令 即 可 ， 如 下 所 示 : 




















> db.query.drop() 
成 功 删 除 后 命令 行将 会 输出 Erue 作 为 提示 。 





4.7 MongoDB 增删 改 查 操 作 


创建 、 读 取 、 更 新 和 删除 操作 ， 合 称 增删 


改 查 (Create Read Update Delete，CRUD )。 这 都 
是 数据 库 的 基本 操作 ，MongoDB 提 供 了 多 个 集合 方法 来 完成 这 些 操作 。 




















4.7.1 创建 新 文档 
前 面 的 例子 中 已 经 使 用 insert () 方 法 执行 过 添加 文档 的 操作 。 此 外 , 还 可 以 使 用 upaate () 














和 save () 方 法 来 创建 新 对 象 。 


尊重 版 权 
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1. 使 用 insert () 创 建新 文档 

创建 新 文档 最 常用 的 方法 是 insert () 方 法 ,向 insert 方 法 传人 一 个 参数 作为 新 文档 插入 集 
合 中 即 可 。 下 面 的 命令 便 可 将 新 文档 插入 到 posts 集 合 中 : 

> db.posts.insert({"title":"Second Post", "user": "alice"}) 


2. 使 用 upaate() 创 建新 文档 


upqate () 方 法 通常 用 来 更 新 已 有 文档 ， 当 然 也 可 以 用 它 来 创建 新 文档 ， 当 查询 条 件 匹配 不 
到 文档 时 ， 结 合 使 用 upsert 标 签 ， 便 可 以 搬入 新 文档 ， 如 下 所 示 : 








> db.posts.updatel({ 


"user": "alice" 

}, 1{ 
"title": "Second Post", 
"user": "alice" 


}, 1{ 
upsert: true 
}) 


在 上 述 示例 中 ，MongoDB 会 先 查 询 user 值 为 alice 的 文档 并 执行 更 新 ， 但 实际 上 集合 中 
是 不 存在 这 样 的 文档 的 ， 由 于 使 用 了 upsert 标 签 ， 当 找 不 到 匹配 文档 更 新 时 ， 便 会 代 以 创建 
新 文档 。 

3. 使 用 save () 创建 新 文档 

另外 一 种 创建 新 文档 的 方法 是 使 用 save () 方 法 ， 当 传 给 它 的 文档 没有 _id 字 段 , 或 者 _id 字 
段 在 目前 的 集合 中 并 没有 被 使 用 时 ， 便 可 创建 新 文档 ， 如 下 所 示 : 

> db.posts.save({"title":"Second Post", "user": "alice"}) 


这 和 update() 方 法 的 功能 类 似 ， 当 找 不 到 可 以 匹配 的 文档 进行 更 新 时 ， 便 会 创建 新 文档 。 









































4.7.2” 读 取 文 档 


find() 方 法 用 于 从 MongoDB 和 集合 中 检索 文档 列表 ， 它 既 可 以 请 求 集合 中 的 所 有 文档 ， 也 可 
以 使 用 查询 条 件 检索 特定 文档 。 


1. 查询 整个 集合 中 的 文档 

要 检索 整个 posts 集 合 ， 只 要 给 fina() 方 法 传 一 个 空 查询 条 件 参 数 ， 或 者 不 传 参数 。 执 行 如 
下 语句 便 可 以 检索 出 整个 集合 中 的 所 有 文档 : 

> db.posts.find() 


此 外 ， 下 面 的 查询 也 可 以 完成 同样 的 任务 : 
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> db.posts.find({}) 
这 两 个 查询 是 等 价 的， 都 会 返回 整个 posts 集 合 中 的 所 有 文档 。 
2. 使 用 等 值 表达 式 


要 检索 特定 文档 ， 可 以 使 用 等 值 条 件 查 询 ， 以 获取 所 有 符合 条 件 的 文档 。 比 如 要 从 posts 命 
令 中 获取 user 为 alice 的 文档 ， 运 行 如 下 命令 即 可 : 











> db.posts.find({ "user": "alice" }) 
这 会 检索 出 所 有 user 值 等 于 alice 的 文档 。 
3. 使 用 查询 操作 符 


仅仅 使 用 等 值 表达 式 是 远 远 无 法 满足 查询 需求 的 。MongoDB 提 供 了 很 多 查询 操作 符 来 完成 
复杂 的 查询 。 使 用 查询 操作 符 可 以 查询 不 同 的 条 件 。 例 如 ， 要 检索 posts 集 合 中 所 有 user 值 为 
alice 或 bop 的 文档 ， 可 以 使 用 $in 操 作 符 : 


> db.posts.find({ "user": { $in: ["alice", "bob"] } }) 








查询 操作 符 还 有 很 多 ， 详 情 请 参阅 http://docs.mongodb.org/manual/reference/ 
人 > operator/query/#query-selectors。 
4. 创建 AND/OR 查 询 


有 时 候 查 询 会 需要 多 个 条 件 ，SQL 语 法 支持 使 用 AND/OR 操 作 符 来 创建 多 个 条 件 查 询 。 在 
MongoDB 查 询 中 要 使 用 AND 操 作 符 ， 直 接 将 需要 检查 的 属性 添加 到 查询 对 象 即 可 ， 如 下 所 示 : 

















> db.posts.find({ "user": "alice", "commentsCount": { $gt: 10 } }) 

相对 于 上 文中 使 用 的 finq() 命令， 这 里 添加 了 commentscount 属 性 的 验证 ， 这 将 只 获取 
user 为 alice 且 commentsCount 大 于 10 的 文档 。oR 操 作 符 要 相对 复杂 一 些 ， 需 要 使 用 $or 操 作 
符 ， 请 看 下 面 的 查询 : 

> db.posts.find( { S$or: [{ "user": "alice" }, { "user": "bob" }] }) 


上 述 语句 将 查询 user 值 为 alice 或 bob 的 文档 。 














4.7.3 ”更 新 已 有 文档 
在 MongoDB 中 对 文档 进行 更 新 ， 既 可 以 使 用 upaate () 方 法 ， 也 可 以 使 用 save () 方 法 。 
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1. 使 用 upaate() 更 新 已 有 文档 


update() 方 法 有 三 个 参数 用 于 更 新 已 有 文档 ， 第 一 个 参数 用 于 确定 所 要 更 新 的 目标 文档 的 
选择 条 件 ， 第 二 个 参数 是 upaate 表 达 式 ， 最 后 一 个 参数 是 选项 对 象 。 比 如 ， 下 面 的 例子 中 ,第 
一 个 参数 是 告诉 MongoDB 找 出 所 有 user 值 为 al ice 的 文档 ， 第 二 个 参数 是 明确 更 新 tit1le 字 段 ， 
第 三 个 参数 是 更 新 选项 ， 告 知 MongoDB 更 新 所 有 符合 条 件 的 文档 : 












































> db.posts.updatel({ 


"user": "alice" 
}, { 
$set: { 
"title": "Second Post" 


}, 1{ 
multi: true 
}) 


请 注意 选项 对 象 中 的 multi 属 性 。update() 默认 是 更 新 单个 文档 ， 你 可 以 通过 设置 multi 
使 update () 方 法 更 新 所 有 符合 选择 条 件 的 文档 。 

2. 使 用 save () 更 新 已 有 文档 

另 一 种 更 新 已 有 文档 的 方法 是 使 用 save () 方 法 , 将 文档 以 参数 的 方式 传 给 它 即 可 。 请 注意 ， 
传人 的 文档 必须 包含 有 _id 字 段 。 例 如 ， 下 面 的 代码 会 更 新 _id 为 objectId("50691737 
d386dq8faqbd6b01d" ) 的 文档 : 












































> db.posts.savel({ 
"_id": ObjectId("50691737d386d8fadbd6b01d"), 
"title": "Second Post", 
"user": "alice" 


}); 
请 注意 ，save () 方 法 会 按 _iq 查 找 相 应 的 文档 ， 如 果 找 不 到 ， 则 会 新 建 一 个 。 








4.7.4 删除 文档 


MongoDB 提 供 了 remove () 方 法 执行 文档 删除 操作 。 该 方法 可 以 传人 两 个 参数 : 第 一 个 参数 
是 删除 条 件 ; 第 二 个 参数 是 布尔 类 型 ， 用 于 确定 删除 类 型 一 一 是 删除 单个 文档 ， 还 是 删除 符合 条 
件 的 所 有 文档 。 

删除 所 有 文档 


要 删除 所 有 文档 ， 只 要 在 调用 remove () 方 法 时 ， 不 传人 任何 删除 条 件 即 可 。 下 面 这 一 命令 
可 以 删除 posts 集 合 中 的 所 有 文档 : 












































> db.posts .remove() 
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要 注意 *emove () 方 法 与 arop () 方 法 的 区 别 。 前 者 是 删除 集合 内 的 所 有 文档 , 后 者 是 删除 整 
个 集合 ， 包 括 这 个 集合 的 索引 。 如 果 要 使 用 不 同 的 索引 重建 整个 集合 ， 推 荐 使 用 arop () 方 法 。 


(1) 删除 多 个 文档 


要 一 次 性 删除 符合 条 件 的 多 个 文档 , 只 需要 向 remove () 方 法 传人 一 个 删除 条 件 即 可 。 例如 ， 
要 删除 posts 集 合 中 所 有 user 为 a1ice 的 文档 ， 执 行 如 下 命令 即 可 : 














> db.posts.remove({ "user": "alice" }) 
请 注意 ， 上 述 命 令 将 会 删除 所 有 user 为 alice 的 文档 。 执 行 该 命令 时 请 务必 慎重 。 
(2) 删除 单个 文档 


要 使 用 remove () 执行 单条 删除 ， 除 了 要 传人 删除 条 件 参 数 外 ， 还 需要 传人 布尔 类 型 参数 来 
设置 删除 类 型 , 其 为 真 时 即 执行 单个 文档 的 删除 。 下 面 这 条 语句 即 删除 user 值 为 al ice 的 第 一 个 
文档 : 








> db.posts .remove({ "user": "alice" }, true) 


即使 aser 值 为 alice 的 文档 有 很 多 ， 上 述 命令 也 只 会 删除 第 一 个 符合 条 件 的 文档 。 





4.8 总 结 


本 章 首先 讲述 了 NoSQL 数 据 库 以 及 它 对 现代 Web 开 发 的 意义 ,然后 介绍 了 NoSQL 潮 流 的 先锋 
MongoDB， 以 及 使 得 它 成 为 强大 的 解决 方案 的 几 个 特性 和 几 个 基本 术语 。 最 后 讲述 了 如 何 使 用 
MongoDB 的 查询 语言 执行 增删 改 查 操作 。 下 一 章 将 讨论 如 何 使 用 Mongoose 模 块 将 Nodejs 与 
MongoDB 结 合 起 来 。 
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和 草 


Mongoose 入 门 








Mongoose 是 一 个 稳健 的 Node.js ODM 模 块 ， 可 让 Express 应 用 支持 MongoDB。Mongoose 使 用 
模式 来 模型 化 实体 ， 提 供 各 类 预定 义 的 校 验 ,也 可 以 自 定义 各 类 校 验 , 定义 虚拟 属性 ， 以 及 使 用 
中 间 件 拦截 并 处 理 各 类 操作 。Mongoose 的 设计 目标 在 于 将 MongoDB 的 无 模式 方法 与 实际 应 用 开 
发 的 需求 衔接 起 来 。 本 章 中 将 讨论 Mongoose 的 如 下 几 个 方面 : 


口 Mongoose 的 模式 与 模型 

口 模式 的 索引 、 修 饰 符 和 虚拟 属 4 
口 使 用 模型 的 方法 处 理 增 删改 查 操作 

口 使 用 预定 义 和 自 定义 的 验证 器 来 对 数据 进行 校 验 
口 使 用 中 间 件 拦截 处 理 模 型 方法 
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5.1 Mongoose 简介 

















Mongoose 是 一 个 提供 了 对 象 模型 化 ， 并 可 将 其 作为 MongoDB 文 档 存 储 的 Node.js 模 块 。 
MongoDB 是 一 个 无 模式 数据 库 ， 通 过 Mongoose 的 模型 ， 我 们 既 可 以 使 用 强制 模式 ， 也 可 以 使 用 
无 模式 模式 。 与 其 他 的 Node.js 模 块 一 样 ， 在 使 用 Mongoose 之 前 ， 我 们 首先 需要 进行 安装 。 本 章 
的 示例 程序 将 沿用 之 前 的 例子 ， 请 直接 复制 第 3 章 末尾 的 示例 代码 ， 并 在 此 基础 上 操作 。 

















5.1.1 


在 安装 好 MongoDB, 并 验证 了 该 实例 是 在 正常 运作 后 , 便 可 以 使 用 Mongoose 模 块 进行 连接 。 
首先 将 Mongoose 安 装 到 应 用 的 模块 文件 来 ， 修 改 package.json 如 下 : 


{ 


"name": 


安装 Mongoose 




















"MEAN", 


TEFS nt0 0 


"dependencies": 
"express": 
"morgan": 
"compression": 
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"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6"， 
ve sy RSL O00 

"mongoose": "~3.8.15" 


} 
} 


在 应 用 根 目录 运行 如 下 命令 安装 新 的 依赖 : 

$ npm install 

这 样 便 可 以 将 Mongoose 的 最 新 版 本 安装 到 应 用 的 node_modules 目 录 中 。 安装 完成 后 , 下 一 步 
便 是 连接 到 MongoDB 实 例 。 

















5.1.2 ”连接 MongoDB 


连接 MongoDB 实 例 ， 需要 用 到 MongoDB 连 接 字符 串 。MongoDB 连 接 字符 串 是 一 个 URL， 用 
于 为 MongoDB 驱 动 指定 需要 连接 的 数据 库 实例 ， 其 构造 如 下 : 








mongodb://username:password@hostname:port/database 


如 果 和 需要 连接 的 是 本 地 服务 絮 实 例 ， 可 以 省 略 用 户 名 和 密码 ， 简 写 如 下 : 

















mongodb://localhost/mean-book 
连接 MongoDB 最 简单 的 办 法 是 直接 在 config/express.js 中 定义 连接 字符 串 ， 并 设置 用 
Mongoose 模 块 进行 连接 : 





var uri = 'mongodb://localhost/mean-book'; 
var db = require('mongoose') .connect (uri); 


不 过 ,在 实际 应 用 开发 中 直接 将 连接 字符 串 写 在 config/expressjs 中 并 不 是 一 个 好 的 实践 方案 。 
最 佳 方案 是 将 应 用 程序 变量 存在 环境 配置 文件 中 。 在 config/env/developmentjs 中 进行 如 下 修改 : 




















module.exports = { 
db: 'mongodb://localhost/mean-book', 
sessionSecret: 'developmentSessionSecret' 


}; 
回 到 config 目 录 ， 在 其 内 创建 mongoose.js， 代 码 如 下 : 


Var config = require('./config'), 
mongoose= require('mongoose'); 


module.exports = function() { 
var db = mongoose.connect (config.db); 


return db; 


和 
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注意 两 点 ， 一 是 Mongoose 模 块 的 包含 ， 二 是 使 用 配置 对 象 中 的 ab 属性 。 然 后 便 可 以 通过 修 
改 serverjs 文 件 对 Mongoose 的 配置 进行 初始 化 。serverjs 文 件 修改 如 下 : 


process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 














var Mongoose= require('./config/mongoose'), 
express = require('./config/express'); 


var db = mongoose(); 
Var app = express(); 
app.listen(3000); 

module.exports = app; 


console.log('Server running at http://localhost:3000/'); 


安装 Mongoose 模 块 、 修 改 配 置 文件 、 连 接 MongoDB 实 例 都 已 经 完成 , 现在 可 以 运行 应 用 了 。 
使 用 命令 行 工 具 进 入 应 用 根 目录 ， 执 行 如 下 命令 : 


$ node server 


应 用 启动 起 来 后 便 会 连接 本 地 的 MongoDB 实 例 。 


如 果 出 现 Error: failed to connect to [localhost:27017] 相 关 的 
~ 一 错误 输出 ， 请 检查 MongoDB 实 例 的 运行 是 否 正常 。 




















5.2 理解 Mongoose 的 模式 


连接 MongoDB 仅 仅 是 第 一 步 ，Mongoose 模 块 真正 的 神奇 之 处 在 于 定义 文档 模式 。 正 如 你 所 
知道 的 ，MongoDB 使 用 集合 存储 多 个 文档 时 ， 并 不 要 求 文档 的 结构 相同 。 但 在 处 理 对 象 时 还 是 
需要 文档 都 是 类 似 的 。Mongoose 使 用 模式 对 象 定 义 文档 的 各 个 属性 ， 每 个 属性 都 有 其 类 型 和 约 
束 ， 以 便 控 制 文档 的 结构 。 模 式 定 义 完 成 后 ， 便 是 定义 用 于 创建 MongoDB 文 档 实例 的 模型 构造 
器 。 本 节 将 主要 介绍 如 何 定义 模式 与 模型 ， 以 及 如 何 使 用 模型 实例 创建 、 检 索 和 更 新 文档 。 


















































5.2.1 创建 User 模 式 与 模型 
我 们 来 创建 一 个 模式 ， 首 先进 入 app/models 文 件 严 ,创建 userservermodeljs 文 件 , 代码 如 下 : 


var Mongoose= tedquire('mongoose' ) ， 
Schema = mongoose.Schema; 


Var UserSchema = new Schemal({ 


firstName: String, 
lastName: String, 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





5.2 ”理解 Mongoose 的 模式 75 





email: String, 

username: String, 

password: String 
})3 


mongoose.model('User', UserSchema); 


上 述 代码 做 了 两 件 事情 ， 第 一 是 使 用 模式 构造 器 定义 了 Userschema 对 象 ， 第 二 是 使 用 模式 
实例 定义 了 User 模 型 。 接 下 来 将 讲述 如 何 利 用 Usez 模 型 处 理应 用 逻辑 层 的 增删 改 查 操作 。 























5.2.2 ”注册 User 模 型 


在 开始 使 用 User 模 型 之 前 ， 需 要 先 在 Mongoose 配 置 文件 中 包含 user.server.model.js 文 件 ， 即 
注册 User 模 型 。 进 入 config/mongoose.js 中 ， 修 改 代码 如 下 : 


var config = require('./config'), 
mongoose= require('mongoose'); 


module.exports = function() { 
var db = mongoose.connect (config.db); 


require('../app/models/user.server.model'); 





return db; 


请 注意 ，Mongoose 配 置 文件 必须 是 serverjs 中 第 一 个 加 载 的 配置 文件 。 以 便 在 Mongoose 加 载 
完成 后 ， 任 何 模块 无 需要 加 载 便 可 直接 使 用 Mongoose 模 型 。 

















5.2.3 使 用 save() 创建 新 文档 


现在 可 以 开始 使 用 User 模 型 了 , 但 为 了 整体 的 有 序 性 ,最 好 创建 一 个 users 控 制 器 , 用 它 来 
处 理 所 有 与 用 户 相 关 的 操作 。 进 入 app/controllers 目 录 ， 创建 一 个 命名 为 users.server.controller.js 的 
文件 ， 并 为 其 输入 如 下 代码 : 


Var User = require('mongoose') .model('User'); 








exports.create = function(req, res, next) { 
Var user = new User(reqg.body); 


user.save (function(err) { 
if (err) { 
return next (err); 
} else { 
res.json(user); 
} 
jy 
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这 上段 代码 中 ， 先 通过 调用 Mongoose 的 模型 方法 返回 前 面 创建 的 User 模 型 ， 接 着 定义 了 控制 
器 方法 create ()， 用 于 创建 新 的 文档 。create () 方 法 中 使 用 关键 字 new 创 建 了 一 个 新 的 模型 实 
例 ， 传 人 的 参数 是 POST 数据 rea.boqy， 最 后 调用 了 模型 实例 的 save () 方 法 ,保存 成 功 则 向 浏 
览 锅 输出 user 对 象 ， 失 败 则 将 错误 传 到 下 一 个 中 间 件 。 


为 检测 上 述 新 创建 的 控制 器 , 需要 创建 用 户 路 由 来 调用 上 文 所 创建 的 create () 控制 吕方 法 。 
在 app/routes 目 录 中 创建 名 为 users.server.routes.js 的 文件 ， 并 为 其 输入 以 下 代码 : 


Var users = require('../../app/controllers/users.server.controller'); 














module.exports = function(app) { 
app.route('/users') .post (users.create); 
} 


我 们 要 创建 的 Express 应 用 主要 是 为 AngularJS 应 用 提供 REST 风 格 的 API， 因 此 在 创建 路 由 时 
尽量 遵循 REST 的 理念 。 在 这 里 ， 最 好 是 使 用 HTTP 的 PosT 方 法 请 求 users 的 基础 路 径 来 创建 新 用 
户 。 修 改 config/express.js 如 下 : 














var config = require('./config'), 
express = require('express'), 
morgan = require('morgan'), 
compress = require('compression'), 


bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'); 


module.exports = function() { 
Var app = express();} 
if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE_ENV === 'production') { 


app.use (compress ()); 


} 


app.use (bodyParser.urlencoded({ 
extended: true 

于 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


app.use (session({ 
saveUninitialized: true, 
resave: true, 
secret: config.sessionSecret 
ps 


app.set('views', './app/views'); 
app.set ('view engine', 'ejs'); 
require('../app/routes/index.server.routes.js') (app); 


require('../app/routes/users.server.routes.js') (app); 
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app.use (express.static('./public')); 


return app; 


外 
创建 完成 ! 然后 进入 应 用 根 目 录 ， 执 行 如 下 命令 对 该 应 用 进行 测试 : 





$ node server 
程序 便 开始 运行 了 。 要 创建 新 的 用 户 , 使 用 HTTP 的 PosST 方 法 请 求 users 的 基础 路 径 ， 请求 报 
体 要 包含 如 下 的 JSON 数 据 : 


{ 


"firstName": "First", 
"lastName": "Last", 

"email": "user@example.com", 
"username": "username", 
"password": "password" 


} 
此 外 ， 我们 还 有 男 外 一 种 方法 来 对 应 用 进行 测试 。 使 用 命令 行 执行 cur1 命 令 ,， 命令 如 下 : 





$ curl -X POST -H "Content-Type: application/json" -d 
'{"firstName":"First", "lastName":"Last","email":"user@Qexample.com","user 
name":"username","password":"password"}' localhost:3000/users 


测试 应 用 的 时 候 ,， 往往 要 发 起 各 种 方法 的 HTTP 请 求 。curl 是 一 个 必 备 的 工 
a 具 , 但 也 有 很 多 其 他 专门 针对 这 类 需求 设计 的 工具 ,建议 你 从 中 选择 一 个 适合 的 ， 
后 面 的 内 容 中 你 还 会 用 到 它 


5.2.4 ”使 用 finda() 查找 多 个 文档 


find() 方 法 是 用 查询 条 件 从 单个 集合 中 检索 多 个 文档 的 模型 方法 ， 0 
集合 方法 find() 的 基础 上 实现 的 。 下 面 以 在 app/controller/users.server.controller.js 中 增加 一 
list () 方 法 为 例 来 看 一 看 ， 代 码 如 下 : 


exports.list = function(req, res, next) { 
User.find({}, function(err, users) { 
if (err) { 
return next (err); 
} else { 
res.json(users); 
} 
| 
有 





























用 
车 
| 
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list () 方 法 使 用 了 find() 来 检索 users 集 合 中 的 文档 。 注 册 一 个 路 由 来 使 用 这 个 新 创建 的 方 
法 。 首 先 ， 打 开 app/routes/users.server.routes.js， 修 改 其 代码 如 下 : 


Var users = require('../../app/controllers/users.server.controller'); 


module.exports = function(app) { 
app.route('/users') 
.post (users.create) 
.get (users.1list); 


六 
然后 执行 如 下 代码 运行 应 用 : 
$ node server 


接 下 来 ， 你 便 可 在 浏览 右 中 通过 访问 http://localhost:3000/users 进 行 测 试 。 
find() 的 高 级 查找 


上 例 中 的 fing () 接 受 了 两 个 参数 ， 一 个 是 MongoDB 查 询 对 象 ， 一 个 是 回调 函数 ， 但 实际 上 
find() 可 以 有 四 个 参数 。 


口 ouery: MongoDB 查 询 对 象 

口 [Fieldas]: 可 选 ， 指 定 返回 的 字段 

口 [options]: 可 选 ， 查 询 配置 选项 对 象 
口 [callpack]: 可 选 ， 回 调 函 数 


例如 ， 如 果 只 需要 返回 用 户 名 和 用 户 邮 件 地 址 字段 ， 对 调用 方法 进行 如 下 修改 即 可 : 
































User.find({}, 'username email1l'，function(err，users) { 
}) 


此 外 ,还 可 以 向 fina() 中 传 和 各 种 选项 ,用 以 控制 搜索 返回 的 结果 ,例如 ,使 用 skip 和 1]imit 
可 以 只 检索 集合 内 一 部 分 的 某 个 子 集 ， 如 下 所 示 : 


User.find({}, 'username email', { 
skip: 10， 
limit: 10 

}, function(err, users) { 











DD); 
上 述 代码 将 从 第 10 个 文档 开始 ， 取 出 10 个 文档 作为 结果 返回 。 





| 了 解 更 多 关于 查询 选项 的 信息 ， 请 参阅 http:/mongoosejs.com/docs/apihtml。 
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5.2.5 使 用 findone() 读 取 单 个 文档 


findone () 用 于 检索 单个 文档 ， 与 fina () 非常 类 似 ， 两 者 的 区 别 在 于 findqone () 只 获取 特 
定子 集中 的 第 一 个 文档 。 在 app/controllers/users.server.controller.js 中 增加 如 下 两 个 方法 : 





exports.read = function(req, res) { 
res.json(req.user); 


上 


exports.userByID = function(req, res, next, id) { 
User.findone({ 
Te “i 
}, function(err, user) { 
if (err 挝 
return next (err); 
} else { 
req.user = user; 
next (); 
} 
os 
}; 


read() 方 法 比较 好 理解 ,直接 使 用 req .user 对 象 的 SON 表 示 作 为 响应 返回 。userById() 
方法 用 于 获取 req .user 对 象 ， 它 将 以 中 间 件 的 方式 运行 ， 获 取 一 个 文档 以 便 后 续 的 删除 、 更 新 
等 操作 。 修 改 app/routes/user.server.routes.js 如 下 : 








Var users = require('../../app/controllers/users.server.controller'); 


module.exports = function(app) { 
app.route('/users') 
.post (users.create) 
.get (users.list); 


app.route('/users/:userId') 
.get (users .ead) ; 


app.param('userId', users.userByID); 


区 

users.read() 方 法 所 在 的 路 由 中 包含 一 个 userId。Express 在 路 由 中 的 字符 之 前 增加 冒号 ， 
该 字符 便 会 被 当 作 一 个 请 求 参 数 来 处 理 。app .param() 定 义 的 中 间 件 负责 生成 reg .user 对 象 ， 
会 在 任何 注册 时 使 用 userIgd 参 数 的 中 间 件 之 前 执行 ， 即 users.userById() 方 法 会 在 
users .read() 这 个 中 间 件 之 前 执行 。 REST 风 格 的 API 经 常会 在 路 由 字符 串 中 使 用 请 求 参 数 ， 
此 这 种 设计 模式 非常 有 用 。 

对 上 述 方法 进行 测试 ， 首 先 执行 如 下 命令 运行 应 用 : 

$ node server 


接 下 来 用 浏览 器 访问 http://localhost:3000/users ， 选 取 任 意 一 个 用 户 的 _id 值 ， 然 后 访问 
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http://localhost:3000/users/[id]， 请 注意 访问 前 先 用 所 选取 的 用 户 _ia 值 将 [iad] 替 换 一 下 。 





5.2.6 更 新 已 有 文档 


Mongoose 模 块 提供 了 多 种 更 新 已 有 文档 的 方法 ， 包 插 update()、findoneAndUpdate() 
和 findByIdAndUpdate()， 这 几 个 方法 的 抽象 层级 各 有 不 同 ， 可 按 需 选用 。 本 例 中 我 们 已 经 创 
建 了 userById() 中 间 件 ， 因 此 最 简单 的 更 新 方法 便 是 使 用 findByIdAndUpdate() 方 法 ,修改 
app/controllers/users.server.controllerjs， 添 加 一 个 新 的 update() 方 法 如 下 : 























exports.update = function(req, res, next) { 
User.findByIdAndUpdate(req.user.id, regq.body, function(err, user) { 
if (err) { 
return next (err); 
} else { 
res.json(user); 
区 
六 


这 里 是 根据 用 户 的 ia 对 文档 进行 查找 并 更 新 。 下 一 步 是 将 新 的 update () 方 法 放 到 users 路 由 
模块 中 使 用 ， 编 辑 app/routes/users.serverroutes .js 文档 如 下 : 











Var users = require('../../app/controllers/users.server.controller'); 


module.exports = function(app) { 
app.route('/users') 
.post (users.create) 
.get (users.1list); 


app.route('/users/:userId') 
.get (users.read) 
.put (users.update); 


app.param('userlid', users.userByID); 


过 
上 述 代码 只 是 在 原来 的 路 由 基础 上 , 链接 上 了 一 个 针对 HTTP PUT 方法 的 路 由 , 使 用 upgdate () 
对 请 求 进行 处 理 。 执 行 如 下 命令 运行 应 用 : 




















$ node server 


然后 用 一 个 可 以 进行 REST 提 交 的 工具 发 送 一 个 PUT 请 求 。 或 者 使 用 如 下 的 curl 命 令 ， 注 意 
将 [id] 蔡 换 为 数据 库 中 实际 的 _id 字 段 值 : 


$ curl -X PUT -H "Content-Type: application/json" -d '{"lastName": 
"Updated"}' localhost:3000/users/ [id] 
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5.2.7 删除 已 有 文档 


Mongoose 模 块 提 供 了 多 个 方法 来 删除 文档 ， 包 括 remove() 、findoneAndRemove() 和 
findByIdAndRemove ()。 本 例 中 已 经 创建 了 userById() 中 间 件 , 因此 使 用 remove () 方 法 最 为 








简便 。 打 开 app/controller/users.server.controller.js， 增 加 delete() 方 法 ， 如 下 : 


exports.delete = function(req, res, next) { 


req.user.remove (function(err) { 
if (err) { 
return next (err); 
} else { 
res.json(req.user); 
} 
} 
让 
这 里 是 根据 user 对 象 对 文档 进行 查找 并 删除 。 接 下 来 ， 在 users 路 由 文件 中 创建 方法 来 调用 


上 面 的 delete() 方 法 。 编 辑 app/routes/users.server.routes.js 如 下 : 


require('../../app/controllers/users.server.controller'); 























Var users = 


{ 


module.exports = function (app) 
app.route('/users') 
.post (users.create) 
.get (users.1ist); 


app.route('/users/:userId') 
.get (users.read) 
.put (users .update) 
.delete(users.delete); 


app.param('userId', users.userByID); 
}; 
与 前 文 类 似 ， 这 里 是 增加 了 处 理 HTTP DE 


来 进行 测试 : 


E 请 求 的 路 由 来 调用 aelete () 方 法 。 运 行 应 用 





| 
C3 
[ea| 
器 











$ node server 





然后 同样 与 前 文 类 似 , 发 起 一 个 REST 风 格 的 pELETE 请 求 。 若 要 使 用 cur1 则 命令 如 下 , 同样 ， 


请 用 MongoDB 中 实际 的 _ia 来 替换 [iad] : 

$ curl -X DELETE localhost:3000/users/[id] 

增删 改 查 操作 已 经 全 部 实现 了 ， 相 信 你 对 Mongoose 的 模型 也 基本 有 了 大 致 的 了 解 。 不 过 这 
仅仅 是 Mongoose 丰 富 功能 的 一 小 部 分 。 下 一 节 我 们 将 讨论 如 何 定义 默认 值 、 使 用 修饰 符 和 进行 


数据 验证 。 
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5.3 扩展 Mongoose 模式 

使 用 ODM 模 块 执 行 简单 的 数据 操作 当然 没有 问题 ， 但 在 复杂 应 用 的 开发 过 程 中 ，ODM 模 
块 要 做 的 远 不 只 是 这 些 。Mongoose 提 供 了 很 多 其 他 的 功能 , 以 保证 数据 一 致 性 和 文档 建 模 的 稳 
定性 。 








5.3.1 定义 默认 值 


默认 值 是 数据 建 模 框架 的 常规 功能 。 该 功能 虽然 也 可 以 在 应 用 的 逻辑 中 得 以 实现 , 但 这 样 做 
一 来 会 引起 代码 混乱 ， 二 来 这 并 不 是 最 佳 实践 。Mongoose 在 模式 中 就 支持 定义 默认 值 ， 这 样 更 
有 助 于 代码 的 组 织 和 文档 正确 性 的 保障 。 


例如 ， 我 们 需要 在 Userschema 中 增加 一 个 created 的 时 间 字 有 段 来 保存 用 户 注 册 时 间 。 该 字 
段 将 在 对 象 创建 时 对 创建 时 间 进 行 初始 化 保存 。 这 便 是 使 用 默认 值 功能 最 好 的 诠释 。 要 想 增 加 
created 时 间 字 段 ， 首 先 需 要 修改 一 下 Userschema。 编 辑 app/models/user.server.model.js， 代 码 
如 下 : 


Var Mongoose= require('mongoose'), 
Schema = mongoose.SsSchema; 

































































Var UserSchema = new Schema (1{ 
firstName: String, 
lastName: String, 
email: String, 
username: String, 
password: String, 
created: { 

type: Date, 
default: Date.now 
} 
及 


mongdoose.model('User'，UserSchema) ; 

上 述 代码 增加 了 createq 字 段 , 并 设置 了 默认 值 。 此 后 对 于 新 创建 的 用 户 文档 , 都 将 有 一 个 
存 有 文档 创建 时 间 的 created 字 段 。 另外 你 可 能 还 会 发 现 , 对 于 添加 created 字 段 之 前 生成 的 用 
户 文 档 , 也 会 有 created 这 个 字段 ， 只 不 过 该 字段 记录 的 是 对 当前 文档 的 查询 时 间 ， 而 并 非 文档 
的 创建 时 间 一 一 这 些 文档 在 创建 时 ，created 字 上 段 还 没有 被 创建 出 来 呢 。 





























测试 以 上 修改 ， 运 行 如 下 命令 运行 应 用 : 
$ node server 


接 下 来 使 用 curl 等 REST 工 具 来 执行 一 个 PosT 请 求 ， 如 下 : 
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$ curl -X POST -H "Content-Type: application/json" -da 
'{"firstName":"First", "lastName":"Last","email":"user@Qexample.com","user 
name":"username","password":"password"}' localhost:3000/users 


一 个 新 用 户 文档 将 会 立即 被 创建 出 来 。 该 文档 将 包含 以 文档 创建 时 间 为 默认 值 的 created 
字段 。 





5.3.2 ”使 用 模式 修饰 符 

某 些 情况 下 ， 可 能 需要 在 文档 保存 之 前 ,或 者 读 取 之 后 对 模式 字段 执行 一 些 操作 。 为 此 ， 
Mongoose 提 供 了 修饰 符 功能 。 修 饰 符 既 可 在 文档 保存 之 前 对 字段 进行 修改 ， 又 可 查询 完成 时 处 
理 之 后 再 返回 。 

1. 预定 义 修 饰 符 


Mongoose 预 定义 了 一 些 简单 的 修饰 符 。 比 如 对 字符 类 型 的 字段 使 用 trim 修 饰 符 去 除 两 端的 空 
格 ， 使 用 uppercase 修 饰 符 转换 为 大 写字 母 等 。 来 看 一 个 预定 义 的 修饰 符 的 例子 ， 将 users 中 的 
username 字 符 去 除 两 端 多 余 的 空格 。 修 改 app/models/user.server.model.js 文 件 如 下 : 

















Var mongoose= require('mongoose'), 
Schema = mongoose.Sschema; 


Var UserSchema = new Schemal{ 
firstName: String, 
lastName: String, 
email: String, 
username: { 

type: String, 
trim: true 
} 
password: String, 
created: { 
type: Date, 
default: Date.now 
} 
和 


mongoose.model('User', UserSchema); 


username 字 上 段 中 的 trim 属 性 便 可 确保 字段 的 开头 和 末尾 不 会 有 空格 。 








2. 自 定义 setter 修 饰 符 


除了 使 用 便捷 的 预定 义 修饰 符 ， 也 可 以 自 定义 setter 修 饰 符 以 便于 在 保存 文档 前 执行 数据 操 
作 。 例 如 要 在 user 模 型 中 增加 一 个 website 字 段 ， 这 个 字段 一 般 是 由 http:// 或 https:y// 打 头 
的 ， 相对 于 强制 用 户 在 输入 时 加 上 它们 ,可 以 自 定义 一 个 修饰 符 来 对 这 些 前 级 进行 检查 , 需要 的 
话 再 对 它们 进行 添加 。website 字 段 可 以 这 样 定义 : 











用 
车 
| 
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Var UserSchema = new Schemal({ 


website: { 
type: String, 
set: function(url) { 
if (lurl) { 
return uril; 
} else { 
if (url.indexOf('http://') !== 0 && url.indexOf('https://') 
!== 0) { 
Uri = https/7. 4. Urly 
} 


return url; 





此 后 当 创 建 用 户 时 , 便 会 对 wepsite 字 上 段 进行 格式 检查 。 但 如 果 集 合 里 已 经 有 很 多 文档 ,又 
需要 修改 数据 , 那 该 如 何 来 操作 呢 ? 第 一 是 对 数据 进行 迁移 , 但 如 果 数 量 非常 大 ， 则 可 能 严重 影 
响 性 能 。 第 二 就 是 使 用 getter 修 饰 符 。 











3. 自 定义 getter 修 饰 符 


getter 修 饰 符 用 于 在 将 文档 向 下 级 进行 输出 之 前 ， 对 文档 数据 进行 修改 。 在 上 述 例子 中 ， 假 
如 要 保证 所 有 文档 在 输出 时 website 字 段 都 是 合法 的 网 址 , 除了 遍历 整个 集合 一 一 进行 检查 并 修 
改 外 ， 还 可 以 通过 定义 getter 修 饰 符 ， 在 文档 输出 前 对 其 website 字 段 进行 处 理 。 为 实现 这 一 功 
能 ， 修 改 Userschema 如 下 : 






































Var UserSchema = new Schemal({ 


website: { 
type: String, 
get: function(ur1l) { 
if (!url) { 
return url; 


} else { 
if (url.indexOof('http://') !== 0 && url.indexOf('https://') !== 0) { 
url = 'http://' + url; 
} 


return uril; 


UserSchema.set('toJSON', { getters: true }); 
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Jy 


前 单 修改 setter 修 人 饰 符 的 set 
以 便 保 说 


盟 性 便 可 作为 getter 修 饰 符 的 get 属 
法 中 , 文档 转换 为 JSON 默 认 不 会 执行 getter 修 饰 符 的 操作 , 所 以 这 里 调用 了 Userschema.set () ， 
FE 在 这 种 情况 下 强制 执行 getter 修 饰 符 
修饰 符 
和 请 务必 说 
相关 信息 。 
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属性 。 因 为 在 res .json() 等 方 
能 强大 ， 能 够 为 你 节省 大 量 的 时 间 。 但 由 于 应 用 行为 的 不 确定 性 ， 
、 你 可 以 通过 访问 http:/mongoosejs.comy/docs/api.html 来 了 解 更 多 
5.3.3 ”增加 虚拟 属性 
有 时 我 们 会 需要 一 些 动态 计算 的 文档 
以 使 用 虚拟 属性 





后 





FE。 例如， 我 们 需要 一 个 叫 fullName 的 字段 对 月 
模式 方法 virtual () 即 可 实现 ,修改 Userschema 如 下 
}); 





return this.firstName + 





UserSchema.virtual('fullName') .get (function() { 
UserSchema.set\( 


日 户 的 名 和 姓 进行 组 
+ this.lastName 
toJSON 


JSON 时 也 依然 使 月 





属性 , 但 又 不 需要 将 它们 真正 存储 到 文档 中 , 这 时 便 可 


{ getters 


合 。 对 此 1 
上 述 代 码 在 Userschema 中 增加 了 fullName 虚 拟 
有 虚拟 属 
虚拟 属 4 














1 
eh os = 
EE 
癌 


月 
性 功能 o 





virtuals 











虚拟 属性 除了 在 读 取 文档 时 增加 
上 # 行 存储 而 不 需要 进行 额外 的 字段 
段 单独 存储 ， 则 可 以 对 虚拟 


true} 





4 属性， 














村 | 
四 
下 
[Es 


属性 进 和 











UserSchema.virtuall(' 
return this.firstName + 


并 配置 了 MongoDB 文 档 在 转换 为 
于 如 下 的 修改 : 
fullName 
}) .set (function(fullName) { 
Var splitName 


人 、 
及 性 ， 还 可 以 使 用 setter 修 饰 符 对 文档 以 特定 的 字段 方式 
性 添加 。 比 如 ， 我 们 需要 把 ful11Name 的 姓 和 名 分 为 两 个 
1 > 
"+ this.lastName 
= fullName.split!( 
this.firstName = 
this.lastName 
}); 


get (function() 
虚拟 属 


,| 
疝 





{ 





i '); 
splitName[0] || 


splitName[1] || 


2 


= 天 


们 可 以 用 它 对 文档 在 整个 应 月 





性 是 Mongoose 很 重要 的 一 个 功能 ， 当 在 不 同 的 应 用 层级 之 间 对 文档 进行 转移 时 ， 我 
日 中 的 表示 进行 修改 ， 而 不 月 
5.3.4 ”使 用 索引 优化 查询 
前 Pa 





1 面 的 内 容 中 已 经 提 到 
所 





将 这 些 修改 保存 到 MongoDB 中 
Mongoose 也 支持 索引 功能 ， 并 且 还 提供 了 加 





MongoDB 支 持 使 用 多 种 类 型 的 索引 对 查询 的 执 
有 助 索 引 ( Secondary Indexes )。 
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行 优化 。 
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最 基本 的 索引 是 唯一 索引 (Unique Index )， 即 索引 字段 在 整个 集合 中 是 唯一 的 。 通 常 都 会 要 
求 username 字 上段 唯 一 ， 在 我 们 的 例子 中 ， 可 以 通过 修改 Userschema 定 义 来 实现 ， 如 下 所 示 : 


Var UserSchema = new Schemal({ 





























username: { 
type: String, 
trim: true, 
unique: true 


5 
3 


这 样 MongoDB 便 会 在 users 集 合 为 username 字 上 段 创建 唯一 索引 。Mongoose 还 支持 使 用 
index 属 性 来 创建 辅助 索引 ， 比 如 在 应 用 中 会 有 很 多 涉及 emai1 字 段 的 查询 ， 创 建 一 个 emai1l 字 
段 的 辅助 索引 可 以 有 效 提升 查询 的 效率 : 


Var UserSchema = new Schemal({ 


























email: { 
type: String, 
index: true 


}, 
a 


索引 是 MongoDB 非 常 奇妙 的 功能 ， 但 使 用 时 还 需 谨 慎 。 比 如 ， 对 于 已 经 有 数据 的 集合 ， 定 
义 唯一 索引 后 ， 可 能 引发 一 些 导致 应 用 无 法 启动 的 严重 错误 。 男 外 ， 应 用 启动 时 Mongoose 会 自 
动 创建 大 量 索 引 ， 如 果 是 生产 环境 的 话 ， 可 能 会 产生 一 些 性 能 问题 。 














5.4 ”模型 方法 自 定义 


Mongoose 横 型 已 经 预定 义 了 很 多 静态 方法 和 实例 方法 ， 有 一 部 分 在 前 面 的 内 容 中 已 经 用 到 
了 。Mongoose 还 支持 对 模型 编写 自 定义 的 方法 ,使 得 应 用 逻辑 能 够 分 布 到 模型 的 模块 中 。 让 我 
们 来 逐个 探讨 一 下 如 何 定义 这 些 方法 。 





5.4.1 自 定义 静态 方法 


模型 的 静态 方法 让 我 们 可 以 操作 模型 层 ， 比 如 自 定 义 一 个 增强 型 的 fing () 方 法 。 例 如 ， 要 
按 username 来 搜索 users， 除 了 在 控制 器 中 写 一 个 方法 一 一 并 不 推荐 这 样 做 ， 还 可 以 写 一 个 模型 
静态 方法 。 模 型 静态 方法 定义 在 模式 的 statics 属 性 中 。 例 如 ， 我 们 要 增加 一 个 findone- 
ByUsername () 的 模型 静态 方法 ， 如 下 所 示 : 


UserSchema.statics.findOneByUsername = function (username, 
callback) { 
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this.findqone({ username: new RegExp(username, 'i') }, callback); 


ja 


上 述 方法 使 用 findqdone() 方法 来 检索 具有 特定 username 值 的 文档 。 使 用 新 增 的 
findoneByUsername () 就 和 使 用 普通 的 模型 静态 方法 一 样 ， 直 接 通 过 模型 来 调用 即 可 ， 如 下 : 
































User .findoneByUsername ('username', functionl(err, user)t{ 
je 


你 可 以 通过 这 种 方法 来 添加 任何 需要 的 功能 到 模型 静态 方法 中 , 实际 开发 中 你 会 发 现 它 的 确 
非常 实用 。 




















5.4.2” 自 定义 实例 方法 

模型 静态 方法 虽然 好 用 ,但 却 不 能 用 来 处 理 实例 化 后 的 对 象 Mongoose 使 用 实例 方法 来 
满足 这 个 需求 ， 以 此 提升 代码 的 重用 ， 降 低 总 体 代码 量 。 通 过 模式 的 methodqs 属 性 成 员 ， 即 可 和 定 
义 实 例 方 法 。 例 如 ， 我 们 要 创建 一 个 验证 密码 的 authenticate() 实例 方法 ， 代 码 如 下 : 











UserSchema .methodqs .authenticate = function(password) { 
return this.password === password; 


7 
接 下 来 可 以 直接 通过 User 模 型 对 象 实例 来 调用 上 述 实例 方法 ， 如 下 : 





user.authenticate('password'); 


通过 上 面 的 例子 可 以 发 现 , 定义 模型 方法 ,可 以 更 好 地 组 织 项 目 代码 ， 提升 代码 重用 率 。 在 
后 面 的 内 容 中 ， 你 会 发 现 这 两 种 模型 方法 都 非常 有 用 。 





5.5 ”模型 的 校 验 


在 进行 数据 处 理 时 经 常 要 面 对 的 问题 便 是 校 验 。 对 于 用 户 输入 的 信息 ， 在 保存 到 MongoDB 
之 前 ， 必 须 先 执行 校 验 。 相 对 于 在 应 用 的 逻辑 层 中 进行 校 验 ， 最 好 是 在 模型 层 中 执行 校 验 。 
Mongoose 本 身 预 置 了 一 些 简 单 的 验证 器 ， 同 时 也 支持 自 定 义 更 为 复杂 的 验证 器 。 验 证 器 定义 在 
字段 这 一 层 , 文档 保存 之 前 ， 它 便 会 被 调用 来 进行 数据 校 验 。 如 果 校 验 通 不 过 , 会 抛 出 相应 的 错 
误 给 回调 函数 。 









































5.5.1 ”预定 义 的 验证 器 


Mongoose 预 置 了 好 几 种 不 同 的 验证 器 ， 大 多 数 是 针对 特定 类 型 的 。 最 简单 的 验证 顺便 是 检 
查 对 应 的 值 是 否 存 在 ,Mongoose 里 面 使 用 字段 的 required 属 性 即 可 实现 。 比 如 我 们 要 在 保存 前 
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验证 username 字 段 是 否 存在 ， 可 以 对 Userschema 进 行 如 下 的 修改 : 
Var UserSchema = new Schemal({ 


username: { 
type: String, 
trim: true, 
unicue: true, 
required: true 


3 | 
这 便 实现 了 在 保存 文档 前 对 username 字 段 是 否 存在 值 的 校 验 ,以 防止 保存 的 文档 username 
字段 为 空 。 


除了 required 验 证 器 ，Mongoose 还 包括 诸如 enum 和 match 之 类 针对 特定 类 型 的 预 置 验证 
器 。 假 如 要 对 email 地 址 的 合法 性 进行 验证 ， 则 可 以 这 样 修改 Userschema: 


























Var UserSchema = new Schemal({ 
email: { 
type: String, 
index: true, 


match: /.+\@.+\..+/ 
2 


)) 
这 里 match 便 会 使 用 正则 表达 式 对 email 字段 进行 检查 ， 以 确保 只 有 能 被 正则 表达 式 匹 配 
emai1 的 文档 才能 保存 。 
此 外 还 有 enum 验 证 器 ， 可 以 被 用 来 对 字段 的 值 域 进 行 限定 。 例 如 ， 我 们 要 限制 zole 字 段 的 
内 容 ， 可 以 这 样 操作 : 
Var UserSchema = new Schema({ 
ole { 
type: String, 
enum: ['Admin', 'Owner', 'User'] 
9 
和 


只 有 当 role 的 值 是 aamin、owner 和 user 三 个 之 一 时 ， 文 档 才 可 以 保存 。 

















你 可 以 通过 访问 http:/mongoosejs.com/docs/validation.html 了 解 更 多 关于 
~ Mongoose 预 置 验证 器 的 信息 。 
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5.5.2 ” 自 定义 的 验证 器 


除了 预 置 的 验证 需 , Mongoose 支 持 自 定义 验证 髓 。 要 想 自 定 义 验 证 器 , 定义 字段 的 valigdate 
盟 性 即 可 。 该 属性 是 一 个 数组 ， 数 组 包括 一 个 函数 和 一 个 报错 消息 。 如 果 我 们 要 对 密码 的 长 度 进 
行 验 证 ， 则 可 以 用 下 面 的 方法 修改 Userschema: 


Var UserSchema = new Schemal{ 























password: { 
type: String, 
validate: [ 
function(password) { 
return password.length >= 6; 
} 
'Password should be longer' 
] 
} 


D); 

当 试 图 保存 的 文档 的 密码 少 于 6 位 时 ， 该 自 定义 的 验证 器 便 会 扫 出 Password should pe 
1ongezr 的 错误 给 回调 函数 。 

Mongoose 的 验证 器 ， 不 但 可 以 有 效 地 对 模型 的 字段 进行 校 验 ， 还 可 以 自 定 义 合适 的 错误 消 
息 , 它 是 一 个 非常 强大 的 功能 。 在 后 续 内 容 中 ， 我 们 还 会 用 它 来 检查 用 户 的 输入 ， 以 保证 数据 的 
一 致 性 。 


























5.6 ”使 用 Mongoose 中 间 件 


Mongoose 中 间 件 可 以 用 来 中 断 init 、validqate、save 和 remove 这 几 个 实例 方法 ， 它 在 实 
例 的 层级 执行 ,包括 预 处 理 中 间 件 和 后 置 处 理 中 间 件 。 








5.6.1 预 处 理 中 间 件 


预 处 理 中 间 件 在 操作 执行 之 前 触发 。 例 如 ,保存 预 处 理 ( pre-save ) 中 间 件 会 在 文档 保存 
之 前 执行 ， 这 一 特性 使 得 预 处 理 中 间 件 很 适合 实现 复杂 的 验证 器 和 默认 值 初始 化 功能 。 


使 用 模式 对 象 的 pre ( ) 方 法 即 可 定义 预 处 理 中 间 件 。 下 面 这 段 代码 可 以 实现 对 模型 的 验证 : 


UserSchema.pre('save', function(next) { 
二 人 ET 
next () 
} else { 
next (new Error('An Error Occured')); 
} 
和 
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5.6.2 ”后 置 处 理 中 间 件 


后 置 处 理 中 间 件 在 操作 执行 完成 之 后 触发 , 例如 , 保存 后 处 理 (post-save ) 中 间 件 在 保存 





文档 完成 之 后 执行 。 比 较 适 合 于 实现 应 用 的 日 志 功能 。 











印 模型 保存 日 志 的 功能 ， 


UserSchema.post ('save'，function(next) 


if(this.isNew) { 


{ 


console.log('A new user was created.'); 


} else { 


console.log('A user updated is details.'); 


} 
l 





























后 置 处 理 中 间 件 使 用 模式 对 象 的 post () 方 法 进行 定义 ， 如 果 使 用 后 置 处 理 中 间 件 来 实现 打 
可 以 使 用 如 下 代码 来 实现 : 


注意 ， 上 述 代码 中 用 了 isNew 属 性 来 确定 是 创建 操作 还 是 更 新 操作 。 


Mongoose 中 间 件 适合 于 日 志 、 校 验 和 数据 一 致 性 处 理 等 应 用 场景 。 概 念 上 可 能 会 感觉 有 点 
复杂 ， 别 担心 ， 本 书后 面 的 内 容 还 会 帮助 我 们 对 它 进行 理解 。 





关于 Mongoose 中 间 件 更 多 的 信息 ， 请 参阅 http:/mongoosejs.com/docs/ 
middleware.html。 


5.7 使 用 Mongoose DBRef 





MongoDB 是 不 支持 连接 查询 的 ， 但 可 以 使 用 DBRef 在 不 同 的 文档 之 间 建 立 引 用 关系 。 
Mongoose 通 过 模式 中 的 0bjectID 类 型 及 ref 属 性 来 实现 对 DBRef 的 支持 。Mongoose 还 支持 在 查 


询 时 将 子 文档 填充 到 父 文档 中 。 





例如 我 们 要 为 博文 创建 一 个 Postschema 模 式 , 每 个 博文 都 通 




















过 PostSchema 的 author 字 上 段 


来 对 应 作者 ， 这 一 字段 由 user 模 型 的 实例 构成 。Postschema 定 义 代码 如 下 : 


Var PostSchema = new Schema({ 
title: { 
type: String, 
required: true 
ji 
content: { 
type: String, 
required: true 
下 
author : { 
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type: Schema.ObjectId, 
ref: 'User' 
} 
ye 


mongoose.model('Post', PostSchema); 
请 注意 ，ref 属 性 指定 使 用 user 模 型 来 填充 author 字 段 。 


在 使 用 中 , 创建 新 的 博文 时 , 必须 先 通过 检索 或 者 创建 的 方式 获取 User 模 型 实例 , 再 用 User 
实例 作为 博文 author 字 上 段 的 值 ， 代 码 如 下 : 
























































Var user = new User(); 
user.save(); 


Var post = new Post(); 
post.author = user; 
post.save(); 


post 文 档 中 将 创建 一 个 关联 了 引用 文档 的 DBRef， 检 索 时 便 可 依 此 获取 引用 文档 。 

DBRef 中 只 是 存 了 引用 文档 的 objectID，Mongoose 还 需要 使 用 user 实 例 来 填充 post 实 例 。 
仿 索 博文 文档 时 ， 使 用 populate () 方 法 便 可 以 将 用 户 文档 填充 过 来 。 下 面 这 段 代 码 ， 演 示 了 如 
何在 fina() 的 结果 集中 对 author 字 段 进行 填充 : 











Post.find() .populate('author') .exec (function(err, posts) { 
和 
上 述 代码 将 会 检索 整个 post 集 合 ， 所 有 文档 的 authoz 字 段 会 使 用 对 应 的 uset 进 行 填充 。 

















DBRef 是 MongoDB 一 个 很 棒 的 功能 ，Mongoose 对 这 一 功能 的 支持 ， 使 得 模型 可 以 通过 对 象 
引用 实现 更 好 的 组 织 。 本 书后 面 的 内 容 中 ， 也 会 用 DBRef 来 支撑 应 用 逻辑 。 








| 了 解 更 多 关于 DBRef 的 信息 ， 请 参阅 http://mongoosejs.com/docs/populate. 
= htm。 


5.8 总结 


本 章 首先 介绍 了 Mongoose 的 模型 ， 了 解 了 如 何 使 用 Mongoose 的 模式 和 模型 连接 MongoDB 的 
实例 , 以 及 如 何 利用 模式 的 修饰 符 和 中 间 件 执行 数据 验证 ; 然后 介绍 了 使 用 虚拟 属性 和 修饰 符 修 
改 文 档 的 显示 与 表达 ; 最 后 是 关于 DBRef 的 介绍 与 使 用 。 下 一 章 将 介绍 Passport 鉴 权 模 块 ， 用 它 
结合 本 章 的 User 模 型 来 处 理 用 户 权 限 。 














用 
车 
| 
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使 用 Passport 模 块 管理 用 户 
权限 








Passport 是 一 个 非常 强大 的 Node.js 鉴 权 模 块 ， 可 以 帮助 Express 对 收 到 的 各 种 请 求 进行 身份 验 
证 。 通 过 运用 策略 ，Passport 不 仅 支 持 本 地 用 户 的 身份 验证 ， 还 支持 OAuth 的 登录 验证 ， 比 如 
Facebook 、Twitter 和 和 Google 等。 通过 运用 Passport 策 略 ， 我 们 可 以 利用 统一 的 User 模 型 为 用 户 提 供 
多 个 登录 方式 。 本 章 的 主要 内 容 如 下 : 


口 理解 Passport 策 略 

口 将 Passport 和 集成 到 MVC 架 构 中 

口 使 用 Passport 的 本 地 策略 进行 用 户 验 证 
口 使 用 Passport 的 OAuth 策 略 

口 提供 OAuth 方 式 的 社交 账号 登录 









































6.1 Passport 简介 





处 理 用 户 登 录 和 注册 的 鉴 权 ， 对 于 大 多 数 的 Web 应 用 来 讲 都 是 至 关 重 要 的 一 环 ， 有 时 候 还 会 
成 为 开发 中 的 一 个 负担 。 而 以 至 精 至 简 的 Node 理 念 所 开发 的 Express 本 身 是 没有 这 一 功能 的 ， 
此 它 需 要 借助 模块 扩展 来 实现 。 Passport 便 是 一 个 使 用 Node.js 中 间 件 模式 而 设计 的 请 求 鉴 权 模 块 ， 
通过 其 策略 机 制 , 开发 人 员 可 以 提供 出 多 种 鉴 权 方法 , 这 便 可 以 使 用 简洁 的 代码 来 实现 复杂 的 身 
份 验 证 层 。 与 普通 的 第 三 方 Node.js 模 块 一 样 ，Passport 需 要 先 安装 才能 使 用 。 本 章 的 示例 基于 前 
面 的 内 容 ， 可 以 直接 在 第 $ 章 最 终 示 例 程序 上 进行 修改 。 






































6.1.1 安装 


Passport 使 用 不 同 的 模块 来 代表 不 同 的 身份 验证 策略 ， 这 些 模块 都 是 基于 Passport 基 础 模块 
的 。 要 想 安 装 Passport 基 础 模块 ， 需 修改 paskage.json 文 件 ， 如 下 所 示 : 
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"name": "MEAN", 

"yerESsLon "O06 

"dependencies": { 
"express": "~4.8.8", 
moa yr Es 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"Ee 0 
"mongoose": "~3.8.15", 
"passport": "~0.2.1" 


} 
接 下 来 进入 应 用 根 目录 ， 使 用 命令 行 工 具 执行 如 下 命令 来 进行 安装 ; 
$ npm install 


指定 版 本 的 Passport 便 会 安装 到 node_ models 目 录 中 。 安装 完成 后 , 接 下 来 需要 对 Passport 进 行 
配置 。 


6.1.2 配置 


Passport 的 配置 需要 如 下 几 个 步骤。 首先 需要 创建 Passport 配 置 文件 。 进 入 config 目 录 ， 创 建 
名 为 passport.js 的 空 文件 ， 稍 后 我 们 会 编辑 其 内 容 。 然 后 在 server.js 文 件 中 对 创建 好 的 passport.js 进 
行 包 含 ， 代 码 如 下 : 








process.env.NODE_ENV = process.env.NODE_ENV || 'development'; 
Var mongoose = require('./config/mongoose'), 
express = require('./config/express'), 


Passport= require('./config/passport'); 
var db = mongoose(); 
Var app = express(); 
varPassport= passport(); 
app.listen(3000); 


module.exports = app; 


console.log('Server running at http://localhost:3000/'); 


第 三 步 ， 在 Express 应 用 中 注册 Passport 中 间 件 ， 编 辑 config/express.js 如 下 : 





Var config = require('./config'), 
express = require!('express'), 
morgan = require('morgan'), 
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compress = require('compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'), 
Passport= require('passport'); 


module.exports = function() { 
Var app = express(); 


if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE ENV === 'production') { 


app.use (compress ()); 


} 


app.use (bodyParser.urlencoded({ 
extended: true 


有 
app.use (bodyParser.json()); 
app.use (methodOverride()); 


app.use (session({ 
saveUninitialized: true, 
resave: true, 
secret: config.sessionSecret 
人 
app.set('views', './app/views'); 
app.set ('view engine', 'ejs'); 


app.use(passport .initialize()); 
app.use(passport.session()); 


require('../app/routes/index.server.routes.js') (app); 
require('../app/routes/users.server.routes.js') (app); 


app.use (express.static('./public')); 


return app; 


}; 

回顾 以 上 的 配置 步骤 ， 首 先 包含 了 Passport 模 块 ， 然 后 注册 了 两 个 中 间 件 ， 即 用 于 Passport 模 
块 启 动 的 passport .initialize() 中 间 件 和 用 于 Express 追 踪 用 户 会 话 的 passport .session () 
中 间 件 。 


Passport 的 安装 和 配置 到 此 就 完成 了 。 但 在 实际 应 用 中 ， 还 必须 安装 身份 验证 策略 。 接 下 来 
的 介绍 将 先 从 提供 简单 的 用 户 名 /密码 身份 验证 层 的 本 地 策略 开始 。 不 过 在 此 之 前 ， 首 先 来 了 解 
一 下 Passport 策 略 是 如 何 工 作 的 。 
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6.2 理解 Passport 策略 




















Passport 通 过 使 用 不 同 的 模块 来 提供 大 量 的 身份 验证 选项 ， 用 以 实现 不 同 的 身份 验证 策略 。 
每 个 模块 都 提供 了 不 同 的 鉴 权 方法 ， 比 如 用 户 名 /密码 验证 、OAuth 验 证 等 。 只 有 安装 和 配置 了 相 
应 的 策略 模块 ， 才 能 够 使 用 Passport 进 行 身 份 验证 。 下 面 将 从 本 地 验证 策略 开始 介绍 。 


6.2.1 使 用 Passport 的 本 地 策略 








Passport 本 地 策略 模块 实现 了 基于 用 户 名 /密码 的 身份 验证 机 制 。 首 先 需 要 安装 本 地 策略 模块 ， 
然后 将 该 模块 配置 为 User Mongoose 模 式 。 下 面 开 始 安装 Passport 本 地 策略 模块 。 


2 省 


1. 安 秋 
修改 package.json 文 件 如 下 : 


"name": "MEAN", 

EESLON Te .0.06 

"dependencies": { 
"express": "~4.8.8", 
"morogamry. velsd0r, 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"OS L010, 
"mongoose": "~3.8.15", 
"passport” ss 02.L", 
"passport-local": "~1.0.0" 

} 

} 


然后 在 应 用 根 目录 下 运行 如 下 命令 安装 该 模块 : 


$ npm install 


相应 版 本 的 Passport 本 地 策略 模块 便 安装 到 node modules 文 件 夹 中 了 。 接 下 来 便 需 要 对 安装 


好 的 模块 进行 配置 。 
2. 配置 





Passport 的 身份 验证 策略 是 基于 Nodejs 各 个 模块 的 ， 通 过 选择 模块 便 可 选择 策略 。 为 了 分 别 
维护 不 同 的 策略 ， 可 以 对 各 个 策略 分 别 使 用 独立 的 配置 文件 。 进 入 config 目 录 ， 创 建 一 个 名 为 
strategies 的 文件 夹 ， 在 其 内 创建 一 个 名 为 localjs 的 文件 并 为 其 输入 如 下 代码 : 








Var Passport= require('passport'), 





LocalStrategy = require('passport-local') .Strategy, 
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User = require('mongoose') .model ('User'); 


module.exports = function() { 
passport.use (new LocalStrategy (function(username, password, done) { 
User.findOonel({ 
username: username 
}, function(err, user) { 
if (err) { 
return done (err); 


} 


if (!user) { 
return done(null, false, { 
message: 'Unknown user' 
Fs 
. 
if (!Iuser.authenticate(password)) { 
return done(null, false, { 
message: 'Invalid password' 
FD) 
} 


return done(null, user); 


上 | 
过 
上 述 代 码 分 别 包 含 了 Passport 模 块 、 本 地 策略 模块 和 自 定义 的 User Mongoose 模 型 。 使 用 
passport .use() 方 法 注册 了 策略 , 该 方法 中 传人 的 参数 是 本 地 策略 的 实例 。 注 意 ,这 里 创建 实 
例 的 参数 是 回调 函数 ， 当 需要 对 用 户 鉴 权时 ， 便 会 执行 该 回调 函数 。 











回调 函数 有 三 个 参数 ,username 、passport 和 上 鉴 权 完成 时 需要 调用 的 回调 函数 done。 外 
层 回 调 函 数 之 内 ， 先 是 用 Mongoose 模 型 User 根 据 传人 的 用 户 名 对 用 户 进 行 查找 ， 并 执行 鉴 权 。 
在 处 理 错误 的 过 程 中 ， 会 将 具体 的 错误 传 给 回调 函数 aone。 鉴 权 成 功 之 后 ， 则 会 将 Mongoose 对 
象 user 传 给 回调 函数 aone。 





























终于 到 了 给 前 面 创建 的 空 文件 config/passportjs 编 写 内 容 的 时 候 了 。 现 在 本 地 策略 已 经 准备 好 
了 ， 接 着 便 是 用 它 来 配置 本 地 身份 验证 ， 编 辑 config/passportjs 的 内 容 如 下 : 








Var Passport= require('passport'), 
mongoose = require('mongoose'); 


module.exports = function() { 
Var User = mongoose.model ('User'); 


passport.serializeUser (function(user, done) { 
done(null, user.id); 


} 


passport.deserializeUser (function(id, done) { 
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User .findone({ 
el 
}, '-password -salt', function(err, user) { 
donel(err, user); 
}); 
} 


require('./strategies/local.js')(); 


}; 

















上 述 代 码 中 ， passport.serializeUser() 和 passport.deserializeUser() 是 用 于 定 
义 Passport 处 理 用 户 信息 的 方法 。 当 用 户 身 份 验证 完成 后 ，Passpor 会 将 用 户 的 _iq 属 性 存 到 会 话 
中 。 当 需要 使 用 user 对 象 的 时 候 ，Passport 便 使 用 _ig 属 性 从 数据 库 中 获取 用 户 信 息 。 注 意 ,， 在 
执行 User .findqone 的 时 候 ， 传 人 了 -passport -salt 参 数 来 防止 读 取 password 和 salt 属 性 。 
另外 ， 代 码 中 还 包含 了 本 地 策略 配置 文件 ， 这 样 ，serverjs 便 可 以 完成 Passport 本 地 策略 的 加 载 。 
下 一 步 便 是 修改 User 模 型 ， 用 它 来 支撑 Passport 身 份 验证 。 


























6.2.2 ”修改 User 模 型 


前 面 已 经 创建 了 User 模 型 的 基本 结构 。 但 在 该 模型 的 实际 应 用 中 ， 还 需要 对 其 加 以 修改 ， 
以 实现 一 些 处 理 身份 验证 过 程 的 需求 。 这 一 操作 主要 是 通过 为 Userschema 增 加 一 个 预 处 理 中 间 
件 和 若干 个 实例 方法 来 完成 的 。 修 改 app/models/userjs 的 内 容 ， 如 下 所 示 : 











Var mongoose = require('mongoose'), 
crypto = require('crypto') 
Schema = mongoose.SsSchema; 


Var UserSchema = new Schemal{ 
firstName: String, 
lastName: String, 
email: { 
type: String, 
match: [/.+\@.+\..+/, "Please fill a valid e-mail address"] 
} 
username: { 
type: String, 
unigque: true, 
required: 'Username is required', 
ri, te 
J 
password: { 
type: String, 
validate: [ 
function(password) { 
return password && password.length > 6; 
}, 'Password should be longer' 
] 
} 
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type: String 


provider: { 
type: String, 
required: 'Provider is required' 
Dy 
providerId: String, 
providerData: {}, 
created: { 
type: Date, 
default: Date.now 
} 
ss 


UserSchema.virtual('fullName') .get (function() { 
return this.firstName + ' ' + this.lastName; 
}) .set (function(fullName) { 
Var splitName = fullName.split(' '); 
this.firstName = splitName[0] || 5 
this.lastName = splitName[1] || 7 
3 


UserSchema.pre('save', function(next) { 
if (this.password) { 
this.salt = new 
Buffer(crypto.randomBytes(16) .toString('base64'), 'base64'); 
this.password = this.hashPassword(this.password); 


UserSchema.methods.hashPassword = function(password) { 
return crypto.pbkdf2Sync (password, this.salt, 10000, 
64) .toSstring('base64'); 
} 3 


UserSchema.methods.authenticate = function(password) { 
return this.password === this.hashPpassword (password); 


} 


UserSchema.statics.findUniqueUsername = function(username, suffix, 
callback) { 
var _this = this; 
var possibleUsername = username + (suffix 


el 
_this.findonel(t{ 
username: possibleUsername 
}, function(err, user) { 
if (!err) { 
if (!user) { 
callback (possibleUsername); 
} else { 
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return _this.findUniqueUsername (username, (suffix || 0) + 
1 callbacky.; 

} 

} else { 
callback (null); 

} 

ja 
sy 


UserSchema.set ('toJSON', { 
getters: true, 
Virtuals: true 


上 

mongoose.model('User', UserSchema); 

上 述 代码 首先 为 UserSchema 增 加 了 四 个 字段 。salt 属 性 ， 用 于 对 密码 进行 哈 希 ; provider 
盟 性 ,用 于 标明 注册 用 户 时 所 采用 的 Passport 策 略 类 型 ; proviqerId 属 性 ， 用 于 标明 身份 验证 策 
略 的 用 户 标志 符 ; proviaerData 属 性 ， 用 于 存储 从 OAuth 提 供 方 获取 的 用 户 信息 。 


接 下 来 ,创建 了 一 个 预存 储 处 理 中 间 件 ,用 以 执行 对 用 户 密码 的 哈 希 操作 。 若 在 实际 应 用 中 
存储 用 户 密码 的 明文 ,一 旦 泄露 后 果 将 不 堪 设 想 。 为 此 , 在 存储 用 户 对 象 之 前 ， 预 存储 处 理 中 间 
件 将 执行 以 下 两 步 操 作 : 首先 ， 使 用 伪 随 机 方法 生成 了 一 个 盐 ; 其 次 ， 使 用 实例 方法 
hashPassword() 对 原 密 码 执行 哈 硕 操 作 。 


此 外 还 有 两 个 实例 方法 ，nashPassword() 实 例 方法 和 authenticate() 实 例 方法 。 其 中 ， 
hashPassword() 实例 方法 是 通过 使 用 Node.js 的 crypto 模 块 来 执行 用 户 密码 的 哈 希 ， 
authenticate() 实 例 方 法 则 将 接收 的 参数 字符 串 的 哈 希 结果 与 数据 库 中 存储 的 用 户 密码 哈 希 
值 进行 对 比 。 最 后 ， 还 创建 了 一 个 静态 方法 findUniqueUsername () ， 用 于 为 新 用 户 确 定 一 个 
唯一 可 用 的 用 户 名 ， 这 个 方法 在 后 面 处 理 OAuth 身 份 验 证 时 将 会 用 到 。 


User 模 型 的 修改 就 完成 了 ， 但 在 对 其 进行 测试 之 前 ， 还 需要 完成 以 下 儿 步 。 












































6.2.3 创建 身份 验证 视图 


为 进行 用 户 身 份 验证 ， 几 乎 所 有 的 Web 应 用 都 需要 用 户 注册 和 登录 页 面 。 在 这 里 将 使 用 EJS 
模板 引擎 来 创建 这 两 个 视图 。 在 app/view 文 件 夹 中 创建 一 个 signup.ejs 文 件 , 并 为 其 输入 如 下 内 容 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 
<$=title %> 
</title> 
</head> 
<body> 
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<%$ for(var i in messages) { %$> 
<div class="flash"><%= messages[i] %></div> 
< 和 } %$> 
<form action="/signup" method="post"> 
<div> 
<label>First Name:</label> 
<input type="text" name="firstName" /> 
</div> 
<div> 
<label>Last Name:</label> 
<input type="text" name="lastName" /> 
</div> 
<div> 
<label>Email:</label> 
<input type="text" name="email" /> 
</div> 
<div> 
<label>Username:</label> 
<input type="text" name="username" /> 
</div> 
<div> 
<label>Password:</label> 
<input type="password" name="password" /> 
</div> 
<div> 
<input type="submit" value="Sign up" /> 
</div> 
</form> 
</body> 
</html> 


注册 视图 页 面 中 主要 包括 一 个 HTML 表 单 、 一 个 用 于 填充 HTML tit1le 属 性 的 EJS 标 签 ， 
以 及 一 个 填充 message 列 表 变 量 的 EJS 循 环 。 接 下 来 再 创建 一 个 signin.ejs 文 件 ， 并 为 其 输入 如 
下 内 容 : 


<!DOCTYPE html> 
<html> 
<head> 

<title> 

<$=title 和 多 > 

</title> 
</head> 
<body> 

< 多 for(var i in messages) { 多 > 





<div class="flash"><%= messages[i] %></div> 
<%$ } %$> 
<form action="/signin" method="post"> 
<div> 
<label>Username:</label> 
<input type="text" name="username" /> 
</div> 
<div> 
<label>Password:</label> 
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<input type="password" name="password" /> 
</div> 
<div> 
<input type="submit" value="Sign In" /> 
</div> 
</form> 
</body> 
</html> 
signin.ejs 文 件 也 比较 简单 ， 它 包括 一 个 HTML 表 单 、 一 个 填充 HTML title 属 性 的 EJS 标 签 ， 


以 及 一 个 填充 message 列 表 变 量 的 EJS 循 环 。 模 型 层 和 视图 层 部 分 就 完成 了 ， 接 下 来 通过 修改 控 
制 层 来 连接 模型 和 视图 。 














6.2.4 ”修改 用 户 控制 器 


进入 app/controllers 目 录 ， 修 改 Users 控 制 器 文件 users.servercontrollerjs 如 下 : 





Var User = require('mongoose') .model('User'), 
Passport= require('passport'); 


var getErrorMessage = function(err) { 
Var message = ''; 


if (err.code) { 
switch (err.code) { 
case 11000: 
case 11001: 
message = 'Username already exists'; 
break; 
default: 
message = 'Something went wrong'; 
} 
} else { 
for (var errName in err.errors) { 
if (err.errorsl[lerrName] .message) message = err.errorsl[lerrNamel]. 
message; 


} 


return message? 


2 


exports.renderSignin = function(req, res, next) { 
if (!req.user) { 
res.render('signin', { 
title: 'Sign-in Form', 
messages: req.flash('error') || reqg.flash('info') 
}); 
} else { 


return res.redirect('/'); 
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exports.renderSignup = function(req, res, next) { 
if (!req.user) { 
res.render('signup', { 


title:. STqgn-UpD. FOrm,., 
messages: req.flash('error') 
3 
} else { 
return res.redirect('/'); 
. 
二 


exports.signup = function(req, res, next) { 
if (!req.user) { 
Var user = new User(reg.body); 
var message = null; 


user.provider = 'local' 


user.save(function(err) { 
if (err) { 
Var message = getErrorMessage (err);} 


req.flash('error', message); 
return res.redirect('/signup'); 
小 
req.login(user, function(err) { 
if (err) return next (err); 
return res.redirect('/'); 
站 
了 
} else { 
return res.redirect('/'); 
} 
中 济 


exports.signout = function(req, res) { 
req.logout (); 
res.redirect('/'); 


> 

私有 方法 getErrorMessage () 用 于 处 理 Mongoose 错 误 对 象 并 返回 统一 格式 的 错误 消息 。 需 
要 注意 的 是 ， 这 里 可 能 主要 存在 两 种 错误 ， 一 是 MongoDB 索 引 错 误 的 错误 代码 ， 二 是 Mongoose 
校 验 错误 的 err .errors 对 象 。 

另外 两 个 控制 器 方法 比较 简单 , 主要 用 于 填充 注册 以 及 登录 页 面 。signout () 方 法 也 比较 简 
单 ， 它 调用 Passport 模 块 提供 reG.1ogonut () 方 法 ， 用 于 退出 已 验证 的 会 话 。 

signup () 方 法 利用 User 模 型 来 创建 新 用 户 。 如 上 述 代码 所 示 ， 该 方法 先是 使 用 HTTP 请 求 
body 创 建 了 一 个 user 对 象 ， 接 着 尝试 将 该 对 象 存 人 MongoDB ， 一 旦 出 现 错误 ， 便 调用 
getErtorMessage () 将 错误 转换 为 便于 用 户 理 解 的 错误 消息 。 如 果 用 户 创建 成 功 ， 便 会 使 用 
Express 提 供 的 read.1ogin () 方 法 来 创建 一 个 登录 成 功 的 用 户 会 话 。 登 录 操 作 完 成 后 ，user 对 象 
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便 会 注册 到 rea .user 对 象 中 。 


使 用 passport.authenticate() 方 法 时 将 会 自动 调用 req.login() 方 
法 ， 因 此 你 只 需要 在 首次 使 用 req.1ogin() 方 法 注册 新 用 户 时 对 其 进行 手动 调 
用 即 可 。 




















上 述 代 码 中 用 到 了 一 个 新 的 模块 。 当 身份 验证 失败 后 , 通常 的 做 法 是 将 请 求 重新 定向 为 回 到 
注册 或 登录 页 面 。 代码 中 出 错时 便 会 这 样 做 , 但 如 何 告知 用 户 所 发 生 的 具体 错误 的 内 容 呢 ?9 当 对 
页 面 进 行 重新 定向 时 , 无 法 直接 将 参数 传 给 目的 页 面 。 这 便 需 要 一 种 可 以 在 不 同 的 请 求 之 间 传 递 
临时 消息 的 机 制 。Node 模 块 connect -Flash 就 是 专门 为 此 而 生 。 





























错误 显示 信息 

connect-Flash 模 块 用 于 存储 临时 消息 , 它 将 消息 存储 在 会 话 对 象 f1ash 中 , 这 些 消息 会 被 
一 次 性 发 送 给 用 户 。 这 一 架构 使 得 connect-Flash 模 块 可 以 在 把 请 求 重 定向 到 其 他 页 面 之 前 ， 
将 错误 消息 传 给 新 的 页 面 。 











(1) 安装 
要 将 connect-Flash 模 块 安装 到 应 用 中 ， 修 改 package.json 文 件 如 下 : 6 
{ 
"name": "MEAN", 
"version": "0.0.6", 
"dependencies": { 
"express": "~4.8.8", 
morgan™: <1.3.0", 
"Compression": ™~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ejs": "~1.0.0", 
"connect-flash": "~0.1.1", 
"mongoose": "~3.8.15", 
"pasSsBort": "20.2.1", 
"Passport-local": "~1.0.0" 


} 
} 


使 用 命令 行 工具 进入 应 用 根 目录 ， 然 后 执行 如 下 命令 来 安装 新 的 依赖 : 














$ npm install 


指定 版 本 的 connect -Flash 模 块 便 会 安装 在 应 用 根 日 录 下 的 node_modules 文 件 夹 中 。 接 着 
便 是 在 Express 应 用 中 对 其 进行 配置 。 
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(2) 配置 








Express 在 经 过 配置 之 后 方 可 使 用 connect -Flash 模 块 。 因 此 需要 在 Express 的 配置 文件 中 包 





含 这 一 新 模块 ， 并 使 用 app .use () 来 为 其 进行 注册 。 修 改 config/expressjs 文 件 如 下 : 


var config = require('./config'), 
express = require('express'), 
morgan = require('morgan'), 
compress = require('compression'), 


bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'), 

flash = require('connect-flash'), 

Passport= require('passport'); 


module.exports = function() { 
Var app = express();} 


if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE_ENV === 'production') { 


app.use (compress ()); 


app.use (bodyParser.urlencoded(t{ 
extended: true 

有 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


app.use(session({ 
saveUninitialized: true, 
resave: true, 
secret: config.sessionSecret 
)) 


app.set ('views', './app/views'); 
app.set ('view engine', 'ejs'); 


app.use(flash()); 
app.use (passport.initialize()); 


app.use (passport.session()); 


require('../app/routes/index.server.routes.js') (app); 
require('../app/routes/users.server.routes.js') (app); 


app.use (express.static('./public')); 


return app; 


上 
Express 应 用 便 可 以 使 用 connect-Flash 在 会 话 中 创建 新 的 flash 区 域 。 
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Elasn() 方 法 用 以 创建 和 检索 flash 消 息 。 回 头 审 阅 一 下 上 
充 注册 和 登录 页 面 的 renderSignup() 方 法 和 render 

















(3) 使 用 
Connect-Flash 模 块 提供 了 req. 
责 填 
{ 


s 时 5 Ea 
面 的 Users 控 制 带 ， 先 来 看 看 负责 
Signin() 方 法 : 
exports.renderSignin = function(req, res, next) 
if (!req.user) { 
res.render('signin', { 
title: 'Sign-in Form', 
messages: req.flash('error') || req.flash('info') 
ye 
} else { 
return res.redirect('/') 
res, next) { 


} 
function(req, 





上 
exports.renderSignup 
if (!req.user) { 
res.render('signup', { 
title: 'Sign-up Form', 
messages: req.flash('error') 
a 
} else { 
return res.redirect('/') 
} 
如 上 述 代 码 所 示 ，res .render () 方 法 是 通过 title 和 message 变 量 来 执行 的 。 其 中 ， 
message 变 量 是 使 用 req.flash() 读 取 的 flash 区 域 中 所 存储 的 消息 。 下 面 回 到 siognup () 方 法 ， 



































req.flash('error', message); 





可 以 看 到 下 面 这 行 代码 : 
这 是 使 用 req.flash () 方 法 将 错误 信息 写 入 flash 中 。 到 此 为 止 ， 你 可 能 注意 到 ， 我 们 没有 
写 signin() 方 法 。 其 原因 在 于 ，Passport 提 供 了 一 个 专门 的 身份 验证 方法 ， 可 以 直接 用 于 定义 





诗 











路 由 。 最 后 一 步 ， 就 剩 下 修改 users 的 路 由 定义 文件 了 。 


添加 用 户 路 由 


server.routes.js 文 件 如 下 : 
require('../../app/controllers/users.server.controller'), 


Var users = 
Passport= require('passport'); 
function(app) { 





模型 、 视 图 和 控制 器 全 部 都 配置 好 了 ， 最 后 便 是 定义 user 的 路 由 ， 修 改 app/routes/users. 


module.exports 
app.route('/signup') 
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.get (users.renderSignup) 
.Dost (users.signup); 


app.route('/signin') 
.get (users.renderSignin) 


.Dost (passport.authenticate('local', { 
successRedirect: '/', 
failureRedirect: '/signin', 


failureFlash: true 
下 ) 坟 3 


app.get ('/signout', users.signout); 


} 3 


不 难看 出 ， 上述 代码 中 定义 的 大 部 分 路 由 ,都 是 直接 跳 到 控制 器 中 的 方法 ， 唯 一 与 其 他 不 一 











样 的 是 /signin 路 由 PosT 请 求 的 处 理 ， 用 的 是 passport .authenticate 




















() 方 法 。 





执行 passport .authenticate() 方 法 时 ,将 通过 传人 的 第 一 个 参数 来 确定 使 用 哪 种 策略 对 
用 户 的 请 求 进行 身份 验证 ， 这 里 使 用 的 local 则 是 使 用 本 地 策略 。 第 二 个 参数 是 option 对 象 ， 








包括 三 个 属性 。 





口 successRedirect: 告知 Passport 身 份 验证 成 功 后 跳 转 的 地 址 。 
口 failureRedirect: 告知 Passport 身 份 验 证 失败 后 跳 转 的 地 址 。 
口 failureFlash: 告知 Passport 是 否 使 用 flash 消 息 。 











最 基本 的 身份 验证 就 完成 了 ， 再 进行 几 处 小 修改 便 可 以 对 上 述 路 径 进行 测试 ， 修 改 


app/controllers/index.server.controller.js 文 件 如 下 : 


exports.render = function(req, res) { 
res.render('index', { 
title: 'Hello World', 
userFullName: req.user ? req.user.fullName : '' 
2 
} 














这 是 将 已 经 成 功 验 证 了 身份 的 用 户 的 全 名 传 到 首页 模板 里 ， 男 修改 app/views/index.ejs 文 件 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title><%$= title %></title> 
</head> 
<body> 
<% if ( userFullName ) { %> 
<h2>Hello <%=userFullName%> </h2> 
<a href="/signout">Sign out</a> 
<% } else { %> 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 
<% } %> 
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<br> 
<img src="img/logo.png" alt="Logo"> 
</body> 
</html> 


现在 便 可 以 开始 测试 整个 身份 验证 层 了 , 使 用 命令 行 工具 进入 应 用 根 目 录 , 执行 如 下 命令 局 
动 应 用 : 


$ node server 


使 用 浏览 器 访问 http://localhost:3000/signin 和 http://localhost:3000/signup ， 试 着 注册 、 登 录 一 
下 ， 再 到 站 点 首页 观察 用 户 信息 是 如 何 保存 在 会 话 中 的 。 




















6.3 理解 Passport 的 OAuth 策略 


OAnuth 是 一 种 身份 验证 协议 ， 让 用 户 可 以 使 用 第 三 方 的 账号 来 登录 到 你 的 Web 应 用 中 ， 整 个 
过 程 用 户 并 不 需要 在 Web 应 用 中 输入 用 户 名 密码 。OAuth 主 要 用 于 社交 平台 , 像 Facebook 、Twitter 
和 Google， 支 持 用 户 使 用 其 账号 来 登录 到 其 他 网 站 上 使 用 。 

















了 解 更 多 关于 OAuth 协 议 的 信息 ， 请 参阅 http:/oauth.net/。 


设置 OAuth 策 略 


Passport 支 持 基 础 的 OAuth 策 略 ， 可 以 在 其 基础 上 实现 任何 基于 OAuth 的 身份 验证 。 不 过 , 通 
过 使 用 一 些 包装 策略 ,Passport 还 支持 几 个 主要 的 OAuth 提 供 方 所 提供 的 用 户 身份 验证 , 以 免 开 发 
人 员 自 己 去 实现 这 些 复杂 的 机 制 。 本 节 将 对 几 个 主要 的 OAuth 提 供 方 的 Passport 身 份 验证 策略 进行 


























开始 之 前 ， 你 需要 在 OAuth 提 供 方 的 网 站 上 创建 开发 者 应 用 。 应 用 中 将 包含 
过 和 OAuth 客 户 端 ID 以 及 OAuth 客 户 端 密码 ， 以 用 于 在 执行 身份 验证 时 对 应 用 进行 校 


验 。 


1. 处 理 OAuth 用 户 的 创建 


相对 于 本 地 策略 的 signup () 方 法 ，OAuth 用 户 的 创建 略 有 不 同 。 当 用 户 使 用 第 三 方 网 站 的 
账号 资料 注册 时 , 用 户 资料 便 已 经 存在 了 , 这 意味 着 用 户 的 验证 将 大 不 一 样 。 为 创建 OAuth 用 户 ， 
辑 app/controllers/users.server.controller.js ， 添 加 如 下 的 模块 方法 : 
































潍 
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exports .SaveOAuthUsetrProfile = function(req, profile, done) { 
User.findOonel({ 
provider: profile.provider, 
providerId: profile.providerId 
}, function(err, user) { 
if (err) { 
return done (err); 
} else { 
if (!user) { 
var possibleUsername = profile.username || 
((profile.email) ? profile.email.split('@')[0] : ''); 


User.findUniqueUsername (possibleUsername, null, 
function(availableUsername) { 
profile.username = availableUsername; 


user = new User (profile); 


user.save(function(err) { 
if (err) { 
var message = _this.getErrorMessage (err); 


req.flash('error', message); 
return res.redirect('/signup'); 


} 


return donel(err, user); 
})s; 
} else { 
return donel(err, user); 


} 
})3 

}3 

上 述 方法 接受 了 用 户 资 料 ， 然 后 在 用 户 集合 中 按 传人 用 户 信息 中 的 provigerId 和 
provider 属 性 对 用 户 进 行 查找 。 如 果 找 到 相符 的 用 户 ， 那 么 就 调用 回调 函数 aone， 并 回 传 
MongoDB 中 对 应 的 user 文 档 。 如 果 找 不 到 ， 则 使 用 User 模 型 的 findaUuniadueUsername () 静态 方 
法 为 用 户 创 建 用 户 名 ， 并 保存 新 用 户 实例 。 这 一 过 程 中 如 果 出 错 ，saveOAuthUserProfile() 
方法 会 使 用 rea.flash() 方 法 和 getErrorMessage () 方 法 来 报告 错误 。 没 有 出 错 则 将 用 户 对 象 
传 给 回调 方法 aone () 。saveOaAuthUserProfile() 方 法 完成 后 ， 便 可 以 去 实现 OAuth 身 份 验证 
策略 了 。 


2. Passport Facebook 策 略 


Facebook 应 该 是 世界 上 最 大 的 OAuth 服 务 提供 方 了 ,很 多 时 比 的 Web 应 用 都 支持 访客 使 用 
Facebook 资 料 登 录 。Passport 通 过 passport-facebook 模 块 支持 Facebook OAuth 身 份 验 证 ,简单 
几 步 便 可 以 实现 基于 Facebook 的 OAuth 身 份 验证 。 
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(D 安装 


要 把 Passport Facebook 模 块 安装 到 应 用 模块 文件 夹 中 ， 需 要 对 package.json 内 容 进 行 修改 ， 如 
下 所 示 : 


{ 





"name": "MEAN", 

Tyersion. “OVO G6, 

"dependencies": { 
"express": "~4.8.8", 
MOroan" ss Mel 3 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ejs": "~1.0.0", 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
"Passdort :TO0w20 LE., 
"passport-local": "~1.0.0", 
"passport-facebook": "~1.0.3" 

} 

} 


然后 安装 新 增加 的 Facebook 策 略 模块 依赖 ， 进 入 应 用 程序 根 目录 ， 执 行 如 下 命令 oe 








$ npm install 


对 应 版 本 的 Passport Facebook 策 略 便 会 安装 到 应 用 根 目录 下 的 node_modules 文 件 夹 中 。 下 一 
步 则 需要 对 其 进行 配置 。 

(2) 配置 

开始 配置 之 前 ， 需 要 先 到 Facebook 开 发 者 网 站 http://developers.facebook.com/ 上 创建 一 
Facebook 新 应 用 ， 并 将 应 用 域名 设 为 1ocalhost。 配 置 完 Facebook 应 用 后 ， 可 获取 Facebook 应 用 


ID 和 密码 ， 用 以 完成 用 户 在 Facebook 的 鉴 权 ， 将 这 两 个 字符 串 保 存 到 环境 配置 文件 中 。 编 辑 
config/env/development.js， 内 容 如 下 : 











module.exports = { 
db: 'mongodb://localhost/mean-book', 
sessionSecret: 'developmentSessionSecret', 
facebook: { 
clientID: 'Application Id', 
clientSecret: 'Application Secret', 
callbackURL: 'http://localhost:3000/o0auth/facebook/callback'"' 
} 
> 


将 在 Facebook 上 新 建 的 应 用 的 站 和 密码 填 人 上 面 代码 中 的 相应 位 置 。callpackURL 属 性 将 
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会 被 传 给 Facebook OAuth 服 务 ， 用 作用 户 授权 完成 后 的 跳 转 地 址 。 


进入 config/strategies/ 文 件 夹 ， 创 建 一 个 名 为 facebook.js 的 


Var Passport= require('passport'), 
让 天 ] require('url'), 
FacebookStrategy require('passport-facebook') 
config regquiret .S/onftdg). 
users 


module.exports tonal 

passport.use(new FacebookStrategy({ 
clientID: config.facebook.clientID, 
clientSecret: config.facebook.clientSecret, 
callbackURL: config.facebook.callbackURL, 
passReqToCallback: true 

}, 

function(req, accessToken, refreshToken, 
var providerData profile._json; 
providerData.accessToken accessToken; 
providerData.refreshToken refreshToken; 


Var providerUserprofile { 
firstName: profile.name.givenName, 
lastName: profile.name.familyName, 
fullName: profile.displayName, 
email: profile.emails[0] .value, 
username: profile.username, 
provider: 'facebook', 
providerId: profile.iqd, 
providerData: providerData 


users.saveOAuthUserProfile (reqg, 
}) 
} 


profile, 


providerUserProfile, 


文件 ， 并 为 其 输入 如 下 代码 : 


.Strategy, 


require('../../app/controllers/users.server.controller'); 


{ 


done) 


done); 


上 述 代 码 首 先 包含 了 Passport 模 块 、Facebook Strategy 对 象 、 环 境 变 量 文件 .Mongoose User 
模型 以 及 Users 控 制 器 。 接 着 创建 了 FacebookStrategy 的 对 象 实 例 , 并 使 用 passport .use () 
方法 对 策略 进行 注册 。FacebookStrategy 对 象 的 构造 函数 需要 两 个 参数 , 其 中 一 个 是 Facebook 
应 用 信息 对 象 ， 另 一 个 是 准备 进行 用 户 验 证 时 会 被 调用 的 回调 函数 。 


该 回调 函数 定义 了 五 个 参数 ， 分 别 是 HTTP 请 求 对 象 、 验 证 请 求 的 accessToken 对 象 、 获 取 
新 访问 令 牌 的 refreshToken 对 象 、 一 个 存 有 用 户 资料 的 profile 对 象 以 及 一 个 用 户 授 权 完 成 后 












































调用 的 回调 函数 aone。 

















在 回调 函数 之 内 ， 先 是 用 Facebook 资 料 创建 了 一 个 新 的 用 户 对 象 ， 然后 调用 了 前 文 创建 的 控 





制 器 方法 saveoauthUserProfile() 来 执行 用 户 的 身份 验证 
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接 下 来 需要 对 Passport 配 置 文件 进行 修改 ， 以 加 载 刚 刚 创建 的 Facebook 策 略 配置 文件 。 编 辑 
config/passport.js 文 件 如 下 : 


Var Passport= require('passport'), 
mongoose = require('mongoose'); 


module.exports = function() { 
Var User = mongoose.model('User'); 
passport.serializeUser (function(user, done) { 
done(null, user.id); 


ey 


passport.deserializeUser (function(id, done) { 
User.findone({ 
2 
}, '-password -salt', function(err, user) { 
donel(err, user); 
了 
3 


require('./strategies/local.js')(); 
require('./strategies/facebook.js')(); 


人 


这 样 便 可 加 载 Facebook 策 略 配置 文件 。 最 后 ， 为 Facebook 用 户 验 证 增加 相应 的 路 由 ， 并 将 
Facebook 登 录 链 接 放 到 注册 和 登录 页 面 上 即 可 。 6 


(3) 增加 路 由 











直接 使 用 passport .authenticate() 方 法 便 可 以 使 用 Passport 的 OAuth 来 进行 用 户 身 份 验 
证 。 进 入 app/routes/users.server.routes.js 文 件 ， 追 加 如 下 内 容 到 文件 的 末尾 : 


app.get ('/oauth/facebook', passport.authenticate('facebook', { 
failureRedirect: '/signin' 
和 
app.get ('/oauth/facebook/callback', passport.authenticate('facebook', 
{ 
failureRedirect: '/signin', 
successRedirect: '/' 
})) 























第 一 个 路 由 将 通过 使 用 passport .authenticte() 方 法 来 启动 用 户 身份 验证 流程 ， 在 成 功 
获取 到 Facebook 上 的 用 户 资料 之 后 ， 第 二 个 路 由 将 同样 通过 使 用 passport .authenticte() 方 
法 结束 这 一 验证 流程 。 





通过 Facebook 进 行 身份 验证 的 工作 便 完 成 了 ,最 后 在 注册 和 登录 页 面 增加 Facebook 登 录 的 链 
接 就 可 以 了 。 在 app/views/signup.ejs 和 app/views/signin.ejs 文 件 中 的 </BoDY> 之 前 添加 如 下 的 
HTML 代码 : 
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<a href="/oauth/facebook">Sign in with Facebook</a> 


用 户 点 击 上 面 的 链接 ， 便 可 以 通过 Facebook 账 号 对 相应 的 应 用 进行 登录 。 
3. Passport Twitter 策略 


Twitter 也 是 一 个 主流 的 OAuth 服 务 提 供 方 ， 很 多 Web 应 用 都 支持 用 户 使 用 Twitter 账号 登录 。 
Passport 通 过 passport-twitter 模 块 来 支持 Twitter OAuth 验 证 。 下 面 来 了 解 一 下 如 何 对 这 一 策 
略 进行 实现 。 























(1) 安装 
要 在 Passport Twitter 策略 模块 目录 中 对 该 模块 进行 安装 ， 编 辑 packagejson 文 件 如 下 : 


{ 
"name": "MEAN", 
"VErSlOnT: "0 06 
"dependencies": { 
"express": "~4.8.8", 
"moOrgan Te tle, 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
ves 00 
"connect-flash": "~0.1.1"， 
iondeoogen "W3815", 
"asenart i vel 
"BasSsBort= oa Va0s0.., 
"passport-facebook": "~1.0.3", 
"passport-twitter": "~1.0.2" 
} 
} 


然后 ， 在 应 用 程序 根 目录 中 执行 如 下 命令 对 Twitter 策 略 的 依赖 进行 安装 : 
$ npm install 


相应 版 本 的 Passport Twitter 策 略 便 安装 到 node_modules 文 件 夹 中 了 。 接 下 来 需要 对 安装 好 的 
策略 进行 配置 。 


(2) 配置 


在 开始 配置 安装 好 的 Twitter 策略 之 前 ， 需 要 先 到 Twitter 开发 者 网 站 http:/devtwittercom/ 上 创 
建 一 个 新 的 Twitter 应 用 。 创 建 完成 后 将 会 获得 Twitter 应 用 的 ID 和 密码 。 与 Facebook 类 似 ， 这 两 串 
字符 将 被 用 于 通过 Twitter 进行 的 用 户 身 份 验证 ， 因 此 需要 将 它们 存储 在 环境 变量 文件 config/ 
env/development.js 中 ， 如 下 : 


















































module.exports = { 
db: 'mongodb://localhost/mean-book', 
sessionSecret: 'developmentSessionSecret', 
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facebook: { 
clientID: 'Application Id', 
clientSecret: 'Application Secret', 
callbackURL: 'http://localhost:3000/0auth/facebook/callback' 
} 
twitter: { 
clientID: 'Application Id', 
clientSecret: 'Application Secret', 
callbackURL: 'http://localhost:3000/0auth/twitter/callback'"' 
} 
二 


将 申请 到 的 Twitter 应 用 ID 和 密码 放 在 相应 的 变量 中 ，callbackURL 会 传 给 Twitter OAuth 服 
务 ， 当 OAuth 验 证 完成 后 ， 用 户 会 被 重新 定向 到 该 地 址 上 来 。 
如 前 文 所 述 ， 应 用 中 的 每 个 Passport 策 略 应 该 分 别 存储 在 独立 的 文件 中 ， 以 便 更 好 地 对 代码 
结构 进行 组 织 。 进 入 config/env/strategies 目 录 ， 创 建 twitterjs 文 件 并 为 其 输入 如 下 代码 : 





Var Passport= require('passport'), 


url = require('url'), 

TwitterStrategy = require('passport-twitter').Strategy, 

config = requirel(' Re ) ， 

users = requirel('. ../app/controllers/users.server.controller'); 


module.exports = function() { 

passport.use (new TwitterStrategy ({ 
consumerKey: config.twitter.clientID, 
consumerSecret: config.twitter.clientSecret, 
callbackURL: config.twitter.callbackURL, 
passReqToCallback: true 

} 

function(req, token, tokenSecret, profile, done) { 
Var providerData = profile._ json; 
providerData.token = token; 
providerData.tokenSecret = tokenSecret; 





Var providerUserPprofile = { 
fullName: profile.displayName, 
username: profile.username, 
provider: 'twitter', 
providerId: profile.iqd, 
providerData: providerData 

} 


users.saveOAuthUserProfile(req, providerUserProfile, done); 


} 
有 


上 述 代 码 首 先是 包含 了 Passport 模 块 、Twitter Strategy 对 象 、 环 境 配置 文件 .JMongoose User 
模型 以 及 Users 控 制 器 。 然 后 使 用 passport.use() 方 法 对 策略 进行 注册 ， 并 创建 了 
TwitterStrategy 对 象 的 实例 。 该 对 象 的 构造 函数 接收 了 两 个 参数 ， 其 中 一 个 是 Twitter 应 用 信 
息 ， 另 一 个 是 验证 时 所 调用 的 回调 函数 。 
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该 回调 函数 定义 了 五 个 参数 , 分 别 是 HTTP 请 求 对 象 token 对 象 、 验 证 请 求 的 tokenSscrect 
对 象 、 包 含 用 户 资料 的 profile 对 象 以 及 验证 完成 后 的 回调 函数 aone。 

在 回调 函数 中 ,创建 了 一 个 包含 有 Twitter 用 户 信 息 的 用 户 对 象 , 还 调用 了 前 面 所 创建 的 控制 
器 方法 saveOAuthUserProfile() 来 执行 用 户 的 身份 验证 。 


Twitter 策 略 配 置 就 完成 了 , 接 下 来 需要 对 Twitter 配 置 文 件 进行 修改 ,以 加 载 刚 刚 创建 的 Twitter 
策略 配置 文件 。 编 辑 config/passport.js 文 件 如 下 : 


Var Passport= require('passport'), 
mongoose = require('mongoose'); 


























module.exports = function() { 
Var User = mongoose.model ('User'); 


passport.serializeUser (function(user, done) { 
done(null, user.id); 


}); 


passport.deserializeUser (function(id, done) { 
User.findOonel({ 
te re gle 
}, '-password -salt', function(err, user) { 
done (err, user); 
}); 
洒洒 


require('./strategies/local.js')(); 

require('./strategies/facebook.js')(); 

require('./strategies/twitter.js')(); 
中 


这 样 便 可 加 载 Twitter 策 略 配置 文件 。 最 后 ， 为 Twitter 用 户 验证 增加 相应 的 路 由 ， 并 将 Twitter 
登录 链接 放 到 注册 和 登录 页 面 上 即 可 。 


(3) 增加 路 由 











在 路 由 文件 appmroutes/users.servertoutes .js 末尾 追加 如 下 代码 


app.get ('/oauth/twitter', passport.authenticate('twitter', { 
failureRedirect: '/signin' 
A) 


app.get ('/oauth/twitter/callback', passport.authenticate('twitter', { 
failureRedirect: '/signin', 
successRedirect: '/' 

有 


路 由 oauth/twitter 使 用 passport.authenticate() 方 法 启动 验证 流程 ， 路 由 /oauth/ 
twitter/callback 在 用 户 授权 访问 Twitter 资料 后 使 用 passport .authenticate() 完 成 验证 
过 程 。 
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基于 Twitter 的 身份 验证 就 完成 了 ， 最 后 一 步 是 将 Twitter 登录 的 链接 放 到 注册 和 登录 页 面 上 ， 
编辑 app/views/signup.ejs 和 app/views/signin.ejs， 在 </BODY> 之 前 添加 如 下 超级 链接 : 


<a href="/oauth/twitter">Sign in with Twitter</a> 


用 户 点 击 这 个 链接 后 便 可 以 使 用 Twitter 账 号 登录 到 应 用 中 来 。 


4. Passport Google 策 略 


最 后 来 介绍 一 下 如 何 实现 Google OAuth 登 录 ， 很 多 Web 应 用 都 提供 了 使 用 Google 资 料 来 登录 
的 功能 。 ee sport-google-oauth 模 块 来 实现 对 Google OAuth 验 证 的 支持 。 下 面 
将 逐步 来 对 其 进行 实现 。 


(1) 安装 
要 在 Passport Google 策 略 模块 目录 中 对 该 模块 进行 安装 ， 编 辑 packagejson 文 件 如 下 : 





"name": "MEAN", 

TS 证 

"dependencies": { 
"express": "~4.8.8", 
morgan™: "S13.0", 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
ej Co 00 
"connect-flash": "~0.1.1", 
"mongoose": "~3.8.15", 
"passport": "~0.2.1", 
"passport-local": "~1.0.0", 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5" 

} 





} 
然后 ， 在 应 用 程序 根 目 录 中 执行 如 下 命令 对 Twitter 策略 的 依赖 安装 : 








$ node install 


相应 版 本 的 Passport Google 策 略 便 安装 到 node_modules 文 件 夹 中 了 。 接 下 来 需要 对 安装 好 的 
策略 进行 配置 。 


(2) 配置 








在 开始 配置 之 前 ， 同 Facebook 和 Twitter 一 样 ， 需 要 先 到 Google 开 发 者 网 站 http:/console. 
developers.google.com/ 上 创建 新 的 Google 应 用 。 新 应 用 中 设置 JAVASCRIPT ORIGINS 为 
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http://localhost:3000/，REDIRECT URIS 为 http://localhost:3000/oauth/google/callback， 完 成 配置 后 
会 得 到 相应 的 ID 和 密码 ， 需 要 将 这 两 个 字符 串 存 储 到 环境 配置 文件 中 。 修 改 config/envw/ 
development.js 的 内 容 如 下 : 


module.exports = { 
db: 'mongodb://localhost/mean-book', 
sessionSecret: 'developmentSessionSecret', 
facebook: { 
clientID: 'Application Id', 
clientSecret: 'Application Secret', 
callbackURL: 
'http://localhost:3000/0auth/facebook/callback' 




















twitter: { 

clientID: 'Application Id', 

clientSecret: 'Application Secret', 

callbackURL: 'http://localhost:3000/o0auth/twitter/callback'"' 
$s 
google: { 

clientID: 'Application Id', 

clientSecret: 'Application Secret', 

callbackURL: '‘'http://localhost:3000/0auth/google/callback' 
} 








ey 
将 ID 和 密码 替换 到 上 述 代码 中 的 相应 位 置 ，callpackURL 中 的 URL 是 用 户 完成 Google 
OAuth 授 权 后 所 跳 转 的 地 址 。 


为 实现 Passport Google 策 略 ， 进 入 config/strategies 文 件 夹 ， 创 建 内 容 如 下 的 google.js 文 件 : 


Var Passport= require('passport'), 








url = require('url'), 

GoogleStrategy = require('passport-google-oauth') .OAuth2Strategy, 
CONfid Erequire(l /Confioy)., 

users = require('../../app/controllers/users.server.controller'); 


module.exports = function() { 

passport.use (new GoogleStrategy ({ 
clientID: config.google.clientID, 
clientSecret: config.google.clientSecret, 
callbackURL: config.google.callbackURL, 
passReqToCallback: true 

Fy 

function(req, accessToken, refreshToken, profile, done) { 
Var providerData = profile._ json; 
providerData.accessToken = accessToken; 
providerData.refreshToken = refreshToken; 


Var providerUserprofile = { 
firstName: profile.name.givenName, 
lastName: profile.name.familyName, 
fullName: profile.displayName, 
email: profile.emails[0] .value, 
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username: profile.username, 
provider: 'google', 
providerId: profile.iqd, 
providerData: providerData 


}; 


users.saveOAuthUserPprofile(req, providerUserProfile, done); 
ee 
}; 
上 述 代 码 首 先 包含 了 Passport 模 块 、Google Strategy 对 象 、 环 境 配置 文件 、 Mongoose User 
模型 和 Users 控 制 咽 。 然 后 使 用 passport .use() 方 法 对 策略 进行 注册 ， 并 创建 了 Google 
Strategy 对 象 实例 。 该 实例 的 构造 函数 接收 了 两 个 参数 ， 其 中 一 个 是 Google 应 用 信息 对 象 ， 男 
一 个 是 在 验证 时 所 要 调用 的 回调 函数 。 


该 回调 函数 需要 接收 五 个 参数 , 依次 是 HTTP 请 求 对 象 .用 于 验证 请 求 的 accessToken 对 象 、 
获取 访问 令 牌 的 refreshToken 对 象 、 用 户 Google 资 料 对 象 和 一 个 用 户 在 Google 中 完成 授权 后 的 
回调 函数 aone。 

回调 函数 内 部 ， 使 用 用 户 的 Google 资 料 创 建 了 一 个 新 user 对 象 ， 并 调用 了 控制 器 的 
saveOAuthUserProfile() 方 法 来 执行 用 户 的 身份 验证 。 

Passport Google 策 略 配置 完成 后 ， 需 要 在 Passport 的 配置 中 加 载 新 的 策略 文件 ， 修 改 
config/passport.js 文 件 如 下 : 


















































Var Passport= require('passport'), 
mongoose = require('mongoose'); 


module.exports = function() { 
Var User = mongoose.model('User'); 


passport.serializeUser (function(user, done) { 
done(null, user.id); 


passport.deserializeUser (function(id, done) { 
User.findone({ 
ke 可 
}, '-password -salt', function(err, user) { 
donel(err, user); 
}); 
} 


require('./strategies/local.js') (); 
require('./strategies/facebook.js') (); 
require('./strategies/twitter.js')(); 
require('./strategies/goo0gle.js')(); 


二 
Passport Google 策 略 文件 便 加 载 好 了 。 最 后 , 为 Google 用 户 验证 增加 相应 的 路 由 , 并 将 Google 
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登录 链接 放 到 注册 和 登录 页 面 上 即 可 。 
(3) 添加 路 由 
同样 ， 还 得 添加 两 个 路 由 ， 打 开路 由 文件 app/routes/users.server.routes.js， 追 加 如 下 代码 : 





app.get ('/oauth/google', passport.authenticate('google', { 
failureRedirect: '/signin', 
scope: |[ 
'https://ww.googleapis.com/auth/userinfo.profile', 
'https://ww.googleapis.com/auth/userinfo.email' 
]s 
全 这 


app.get('/oauth/google/callback'，passport .authenticate('google'，({ 
failureRedirect: '/signin', 
successRedirect: '/' 


})); 


路 由 /oauth/google 使 用 passport.autnenticate() 方 法 来 启动 身份 验证 流程 ， 路 
/oauth/google/callback 也 使 用 了 passport.authenticate() 方 法 ， 用 于 接收 用 户 的 
Google 资 料 ， 完 成 身份 验证 。 


基于 Google 的 身份 验证 功能 就 完成 了 ， 最 后 便 是 在 登录 和 注册 页 面 中 添加 使 用 Google 登 录 的 
链接 , 编辑 app/views/signup.ejs 和 app/views/signin.ejs 文 件 , 在 </BODY> 标 签 前 添加 如 下 的 超级 链接 : 












































<a href="/oauth/google">Sign in with Google</a> 


用 户 点 击 该 链接 后 便 可 以 使 用 Google 账 号 登录 到 应 用 中 来 。 要 对 新 创建 的 验证 策略 进行 测 
试 ， 首 先 用 命令 行 运行 如 下 命令 启动 应 用 : 








$ node server 


然后 访问 http://localhost:3000/signin 和 http://localhost:3000/signup， 并 用 该 验证 方法 尝试 进行 
登录 以 及 退出 。 你 还 可 以 登录 到 主页 中 观察 用 户 信息 是 如 何 存储 到 会 话 中 的 。 








> Passport 还 支持 一 些 其 他 的 第 三 方 OAuth 登 录 。 详 情 请 参阅 http://passportjs. 
Q org/guide/providers/。 
6.4 总 结 








本 章 重点 讨论 了 Passport 模 块 的 使 用 ， 包 括 多 种 登录 策略 的 安装 与 配置 。 还 学 习 了 如 何 处 理 
用 户 的 注册 ， 怎 样 对 用 户 的 请 求 进行 身份 验证 ， 包 括 使 用 用 户 名 和 密码 登录 的 本 地 策略 ， 以 及 
Passport 支 持 的 几 种 不 同 的 OAuth 登 录 。 下 一 章 将 学 习 AngularJS。 
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前 面 我 们 已 经 接触 了 MEAN 中 的 三 个 部 分 ， 本 章 将 介绍 它 的 最 后 一 个 部 分 一 一 Angular]S。 
2009 年 ， 开 发 人 员 Misko Hevery 和 Adam Abrons 准 备 创建 一 个 使 用 JSON 来 提供 服务 的 平台 ， 他 们 
发 现 通 用 的 JavaScript 库 根本 无 法 满足 这 一 需求 。 宣 Web 应 用 的 特性 ,使 得 只 有 使 用 结构 化 的 框架 ， 
才 可 以 减少 元 余 的 工作 并 更 好 地 对 项 目 代 码 进行 组 织 。 在 放弃 最 初 的 计划 后 , 他 们 决定 开发 一 个 
名 为 AngularJS 的 结构 化 框架 ， 并 将 其 开源 。AngularJS 连 接 了 JavaScript 和 HTML， 它 的 出 现 使 单 






































页 应 用 开发 迅速 流行 起 来 。 本 章 中 的 主题 主要 包括 : 


口 AngularJS 的 核心 概念 

口 了 解 前 端 依赖 管理 工具 Bower 

口 AngularJS 的 配置 与 安装 

口 AngularJS 应 用 的 创建 与 组 织 

口 合理 利用 AngularJS 的 MVC 架 构 

口 使 用 AngularJS 服 务实 现 Authentication 服 务 








7.1 AngularJS 简介 


AngularJS 是 运用 MVC 理 论 针对 单 页 Web 应 用 设计 的 JavaScript 前 端 框架 。AngularJS 利 用 特殊 
的 属性 将 HTML 元 素 与 JavaScript 逻 辑 绑 定 起 来 ， 从 而 扩展 HTML 的 功能 。HTML 经 过 AngularJS 的 
扩展 , 便 可 以 通过 浏览 器 端 模 板 和 双向 数据 绑 定 来 实现 模型 和 视图 间 的 数据 无 颖 同步 , 从 而 简化 








DOM 操 作 。 此 外 ，MVC 和 依赖 的 注入 不 仅 改善 了 应 用 的 代码 结构 ， 还 提高 了 它 的 可 测试 性 。 























AngularJS 使 用 虽然 简单 ， 但 如 果 想 通过 使 用 它 进行 大 型 应 用 开发 ， 还 是 比较 复杂 的 ， 为 此 ， 
我 们 先 来 了 解 一 下 AngularJS 框 架 的 核心 概念 。 





7.2 ”AngularJS 的 核心 概念 


让 


AngularJS 的 双向 数据 绑 定 使 得 应 用 程序 的 起 步 变 得 简单 起 来 ,但 在 实际 的 应 用 开发 中 ,事情 
依旧 还 是 比较 复杂 的 。 因此 在 进行 MEAN 应 用 开发 之 前 , 最 好 先 弄 清楚 AngularJS 的 儿 个 核心 概念 。 
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7.2.1 核心 模块 


AngularJS 核 心 模块 包含 了 所 有 启动 应 用 所 必需 的 东西 。 它 包含 一 些 对 象 和 实体 ， 用 以 完成 
AngularJS 应 用 的 基本 操作 。 


angular 全 局 对 象 


angular 全 局 对 象 包含 了 一 系列 的 方法 ， 用 以 创建 和 加 载 Web 应 用 。 其 中 需要 注意 的 是 ， 
angular 对 象 包含 一 个 精简 版 的 jQuery 一 一 jqLite, 可 以 用 来 执行 一 些 基 本 的 DOM 操 作 。angular 
对 象 还 包括 一 些 静 态 方 法 , 这 些 方 法 用 于 应 用 内 基本 实体 的 创建 、 操 作 和 修改 , 还 可 以 创建 和 检 
索 模块 。 























7.2.2 ”模块 


AngularJS 的 所 有 东西 都 使 用 模块 来 进行 封装 。 无 论 我 们 是 选择 将 整个 应 用 封装 成 一 个 模块 ， 
抑或 是 划分 为 多 个 模块 ，AngularJS 都 至 少 需 要 一 个 模块 才 运 行 。 


1. 应 用 程序 模块 


要 启动 AngularJS 应 用 至 少 得 有 一 个 模块 ， 一 般 称 之 为 应 用 程序 模块 (application module )。 
AngularJS 利 用 angular.modqdule (name，[requires]，[configFn]) 方 法 来 创建 和 检索 模块 ， 
该 方法 包含 如 下 三 个 参数 。 

口 name: 字符 串 ， 定 义 模块 名 。 

口 requires: 字符 串 数组 ， 定 义 本 模块 所 依赖 的 其 他 模块 。 

口 configFn: 国 数 ， 会 在 模块 注册 时 执行 。 

当 省 略 掉 requires 和 configFn 人 参数 后 ，AngularJS 将 在 所 有 模块 中 对 以 指定 name 为 名 的 模 


块 进行 查找 ， 如 果 找 不 到 则 抛 出 错误 。 全 参数 调用 angular .module () ，AngularJS 则 会 创建 出 
一 个 新 的 模块 。 本 章 后 面 的 内 容 ， 将 使 用 它 来 创建 应 用 程序 模块 。 


2. 扩展 模块 


AngularJS 开 发 团队 已 经 决定 在 后 续 的 开发 中 ， 将 AngularJS 的 功能 拆 分 为 扩展 模块 。 扩 展 模 
块 也 是 由 核心 框架 的 开发 团队 所 开发 , 但 不 会 包含 在 核心 框架 中 , 我 们 可 针对 功能 需求 来 对 它们 
分 别 进行 安装 。 在 后 面 讨论 应 用 路 由 的 小 节 中 ， 我 们 将 通过 举例 来 讨论 该 如 何 使 用 扩展 模块 。 


3. 第 三 方 模块 


除 对 扩展 模块 的 支持 外 ，AngularJS 团 队 还 鼓励 各 种 外 部 开发 团队 通过 创建 第 三 方 模块 为 开 
发 人 员 提供 更 好 的 开发 起 点 。 在 后 面 的 内 容 中 , 我 们 将 会 讲述 如 何 通过 使 用 第 三 方 模块 来 提升 开 
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7.2.3 双向 数据 绑 定 


双向 数据 绑 定 机 制 是 AngularJS 最 重要 的 特性 之 一 。 这 一 特性 使 得 AngularJS 应 用 中 模型 的 数 
据 能 够 同步 到 相应 的 视图 上 ,相反 ,视图 上 的 数据 变化 亦 可 以 同步 到 模型 。 这 意味 着 视图 填充 的 
结果 即 为 模型 的 投影 。 为 了 帮助 我 们 理解 ，AngularJS 团 队 绘 出 了 下 面 这 张 图 。 








模型 模板 














传统 的 单 向 数据 绑 定 


通过 上 图 可 以 发 现 ， 大 多 数 的 模板 系统 都 是 单 向 与 模型 进行 绑 定 。 一 旦 模型 的 数据 变化 了 ， 
开发 人 员 便 要 对 视图 作出 相应 的 修改 。 比 如 EJS 模 板 引擎 , 它 便 是 单 向 地 将 应 用 数据 与 EJS 模 板 绑 
定 进 而 生成 HTML 页 面 。 而 AngularJS 的 模板 却 不 是 这 样 ， 再 来 看 看 下 面 这 张 图 。 
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AngularJS 通 过 使 用 浏览 器 来 编译 HTML 模板 , 模板 里 的 特殊 指令 和 绑 定 命 人 
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时 更 新 。 视 图 上 发 生 的 任何 事件 ， 都 会 自动 更 新 到 模型 中 ， 当 然 ， 模 型 中 一 旦 发 生 了 修改 ， 便 会 
立即 在 视图 中 反映 出 来 。 就 是 说 ,在 整个 应 用 中 ,模型 是 唯一 的 数据 来 源 。 这 对 整个 开发 过 程 来 
， 效 率 获 得 了 实质 性 的 提升 。 本 章 后 面 会 讲 到 控制 咒 和 视图 如 何 通过 AngularJS scope 与 应 用 模 
进行 交互 。 























些 胀 


7.2.4 依赖 注入 


Martin Fowler 普 及 了 依赖 注入 〈dependency injection ) 这 一 软件 开发 模式 ， 它 背后 主要 的 原 
理 是 软件 开发 架构 中 的 控制 反 转 (inversion of control )。 为 了 帮助 理解 ， 我 们 来 看 看 下 面 这 个 
Notifier 的 例子 : 

var Notifier = function() { 


this.userService = new UserService(); 


下 























Notifier.prototype.notify = function() { 
var user = this.userService.getUser(); 


if (user.role === 'admin') { 
alert('You are an admin!'); 
} else { 


alert('Hello user!'); 
} 
二 
Notifier 类 创建 了 userservice 这 个 实例 ， 当 调用 notify () 方法 时 ， 它 会 根据 用 户 的 不 
同 给 出 不 同 的 消息 提示 。 如 果 要 对 Notifier 类 进行 测试 , 我 们 可 以 创建 一 个 Notifier 实 例 , 但 
却 不 能 通过 传 和 一 个 假 的 usersevice 对 象 来 对 notify () 方 法 的 不 同 输出 进行 测试 。 依 赖 注入 
就 是 为 了 化 解 这 一 问题 ， 其 解决 方案 在 于 ， 把 创建 userservice 对 象 的 责任 转交 给 创建 
Notifier 实 例 的 代码 ， 可 能 是 男 一 个 对 象 ， 也 可 能 是 一 个 测试 。 这 个 代码 通常 称 作 注入 器 
( injector )。 上 例 的 依赖 注入 版 如 下 : 


Var Notifier = function(userService) { 
this.userService = userService; 

和 过 

Notifier.prototype.notify = function() { 
Var user = this.userService.getUser(); 





























if (user.role === 'admin') { 
alert ('You are an admin!'); 
} else { 


alert('Hello user!'); 
} 
i 
从 现在 起 ,创建 Notifier 类 的 实例 时 , 将 由 注入 器 来 负责 往 构造 函数 里 注 人 userservice 
对 象 。 这 使 得 我 们 可 以 在 构造 函数 之 外 对 Notifier 实 例 进行 修改 。 这 种 设计 方法 就 是 控制 反 转 。 
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AngularJS 中 的 依赖 注入 


通过 上 文 的 介绍 ， 你 应 该 对 依赖 注 和 人 有 了 一 定 的 了 解 。 让 我 们 来 看 看 AngularJS 是 如 何 实现 
依赖 注入 的 。 使 用 模块 的 controller () 方法 可 以 创建 AngularJS 的 控制 器 ， 代 码 如 下 : 








angular.module('someModule') .controller('SomeController', 
function($scope) { 


}); 

controller () 方 法 接收 两 个 参数 ， 控 制 咒 名 和 控制 器 的 构造 函数 。 控 制 圳 的 构造 函数 被 注 
人 了 名 为 Sscope 的 AngularJS 对 象 。injector 对 象 通过 函数 的 参数 名 来 确定 所 要 注 和 人 的 对 象 。 
为 了 部 署 生产 环境 , 开发 人 员 往 往 会 使 用 压缩 服务 来 混淆 和 压缩 JavaScript 文 件 , 如 此 ,上 面 的 代 
码 就 会 被 压缩 为 : 


























angular.module('someModule') .controller('SomeController', function(a) 
:ee 


这 样 一 来 ，AngularJS 注 入 器 就 根本 不 知道 该 注 和 人 哪个 对 象 了 ， 为 此 ，AngularJS 提 供 了 另外 
一 种 语法 来 标示 依赖 ， 即 用 标示 过 的 依赖 数组 来 取代 这 种 将 函数 作为 第 二 个 参数 传人 的 方法 , 以 
防 因为 代码 混 消 而 导致 注入 需 弄 混 了 哪个 依赖 是 控制 需 的 构造 函数 所 真正 需要 的 。 


使 用 标示 过 的 依赖 数组 来 组 织 的 代码 如 下 : 





angular.module('someModule') .controller('SomeController'，['Sscope'， 
function(Sscope) { 


)]) ; 
这 样 ， 不 管 代 码 怎样 混淆 ， 依 赖 列表 总 是 完整 的 ， 控 制 器 的 功能 便 不 会 再 受到 影响 。 








这 里 我 们 只 是 以 controller () 方 法 为 例 来 解释 依赖 注入 原理 , 但 该 原理 也 
> 同样 适用 于 AngularJS 的 其 他 实体 。 


7.2.5 AngularJS 指令 








前 面 我 们 曾经 提 到 ，AngularJS 并 不 是 要 取代 HTML, 而 只 是 对 其 进行 扩展 。 而 扩展 则 是 借助 
指令 ( directive ) 这 一 机 制 进行 的 。AngularJ$ 的 指令 就 是 标签 ， 通常 都 是 属性 或 者 元 素 名 称 ， 
AngularJS 的 编译 右 依 此 来 为 DOM 元 素 和 它 的 下 级 元 素 附 加 一 些 特殊 行为 。 简 单 来 说 ， 指 令 是 
AngularJS 与 DOM 元 素 之 间 交 互 的 方法 ,同时 它 还 支撑 着 AngularJS 应 用 中 的 基本 操作 。 该 特性 更 
吸引 人 的 一 点 在 于 ， 它 还 支持 自 定义 指令 。 
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1. 核心 指令 
AngularJS 本 身 预定 义 了 很 多 必要 的 指令 ， 这 些 指令 构成 了 AngularJS 应 用 的 基本 功能 。 指 令 
一 般 会 作为 元 素 的 属性 或 名 称 。 本 节 将 介绍 几 个 最 主要 的 核心 指令 , 本 书 中 的 例子 也 会 用 到 很 多 
其 他 的 AngularJS 指 令 。 


最 基本 的 指令 当 属 ng-app, 它 一 般 被 置 于 AngularJS 的 应 用 根 元 素 的 DOM 元 素 ( 通常 是 body 
或 者 html 标 签 ) 之 上 。 比 如 将 其 应 用 在 body 标 签 上 : 


<body ng-app></body> 

后 面 还 会 详细 介绍 ng-app， 在 这 里 我 们 先 看 另外 几 个 AngularJS 自 带 的 常用 核心 指令 。 
口 ng-controller: 用 于 告知 编译 需 当 前 的 元 素 视 岁 所 用 的 是 哪 一 个 控制 器 类 。 

口 ng-model: 一 般 置 于 用 于 输入 数据 的 元 素 之 上 ， 将 输入 与 模型 的 属性 进行 绑 定 。 
D ng-show/ng-hide: 根据 布尔 表达 式 来 决定 元 素 是 显示 还 是 隐藏 。 

口 ng-repeat: 遍历 一 个 集合 ， 为 集合 中 的 每 一 个 项 目 都 复制 一 个 元 素 与 之 对 应 。 

我 们 将 逐一 讨论 上 述 指令 的 用 法 ， 但 要 注意 的 是 ， 这 只 是 众多 AngularJS 核 心 指令 中 的 一 小 
部 分 。 接 下 来 会 讨论 更 多 关于 指令 的 用 法 ， 但 你 同样 可 以 通过 访问 AngularJS 的 官网 文档 来 了 解 
这 些 指 令 ， 地 址 是 http://docs.angularjs.org/api/。 

2. 自 定义 指令 

本 书 将 不 在 自 定 义 指令 上 着 墨 ， 但 要 明确 的 是 ，AngularJS 是 支持 编写 自 定 义 指令 的 ， 它 可 
以 帮 你 减少 宛 余 的 前 端 代码 , 从 而 保持 应 用 的 整洁 和 可 读 性 ,还 可 以 帮 你 更 好 地 对 应 用 进行 测试 。 

























































































流程 。 


| 第 三 方 开发 者 提供 了 很 多 补充 性 的 开源 指令 ， 这 些 指令 可 以 大 大 加 速 开发 


7.2.6 AngularJS 应 用 的 引导 


AngularJS 应 用 的 引导 包括 两 方面 内 容 , 一 是 告诉 Angular 哪 个 DOM 元 素 是 应 用 的 根 元 素 ， 二 
是 何 时 对 应 用 进行 初始 化 。 该 应 用 引导 既 可 以 在 所 有 的 页 面 资源 加 载 完 成 后 自动 开始 , 也 可 以 手 
工 添加 相应 的 JavaScript 代 码 来 完成 。 手工 引导 的 好 处 在 于 可 以 更 好 地 控制 引导 流程 , 确保 某 些 让 
辑 能 够 在 AngularJS 应 用 启动 之 前 执行 。 在 某 些 简单 的 场景 中 自动 引导 是 非常 行 之 有 效 的 。 


1. 自动 引导 


使 用 ng-app 指 令 可 以 自动 引导 AngularJS 应 用 。 一 旦 应 用 的 JavaScript 文 件 加 载 完 成 ， 
AngularJS 会 查找 标 有 ng-app 的 DOM 元 素 ， 并 为 每 个 元 素 分 别 引导 应 用 。ng-app 指 令 作 为 属性 ， 
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其 值 可 以 为 空 。ng-app 也 可 以 是 应 用 模块 的 名 字 。 需 注意 的 一 点 是 ， 这 里 所 有 的 应 用 模块 必须 
由 angular .module () 方 法 来 创建 ， 否 则 便 会 抛 出 错误 ， 导 臻 引导 失败 。 


2. 手动 引导 


要 手动 引导 应 用 ， 可 以 使 用 angular.bootstrap (element， [modules], [config]) 方 
法 。 该 方法 包含 了 以 下 参数 。 


口 element : 所 要 引导 的 应 用 的 DOM 元 素 

口 modules: 所 有 想 附 给 应 用 的 模块 名 数组 

口 config: 应 用 的 配置 选项 对 象 

通常 在 使 用 jqLite 的 文档 加 载 事 件 完成 之 后 来 调用 这 一 方法 即 可 。 


在 快速 了 解 了 AngularJS 的 核心 概念 之 后 ， 我 们 便 可 以 来 实现 MEAN 应 用 中 的 AngularJS 部 分 
了 。 本 章 的 示例 基于 前 面 的 示例 ， 在 第 6 章 的 最 终 示例 程序 上 进行 修改 即 可 。 

















7.3 安装 AngularJS 


作为 一 个 前 端 框 架 ，AngularJS 的 安装 就 是 将 它 的 JavaScript 文 件 包 含 进 主页 中 。 这 里 的 安装 
方法 有 很 多 种 ， 其 中 比较 简单 的 一 种 方法 是 将 该 JavaScript 文 件 下 载 并 放 到 public 文 件 夹 中 。 另 外 
一 种 是 使 用 Angular 的 CDN， 直 接 从 CDN 服 务 器 上 加 载 该 JavaScript 文 件 。 这 两 种 方法 简单 而 又 容 
易 理解 , 但 都 存在 一 个 致命 的 问题 。 加 载 一 个 第 三 方 JavaScript 文 件 虽 然 简 便 直观 , 但 若 要 在 项 目 
中 使 用 大 量 第 三 方 提供 的 库 将 非常 麻烦 。 更 重要 的 是 , 如 何 管理 这 些 依赖 库 的 版 本 ? Nodejs 的 生 
态 系统 中 使 用 npm 来 解决 这 个 问题 ， 前 端的 依赖 管理 也 有 一 个 类 似 的 工具 





























Bower。 





7.3.1 Bower 包 管 理 器 

Bower 是 一 个 包 管 理 器 ， 专 门 用 来 下 载 和 管理 前 端 第 三 方 库 。 作 为 一 个 Node.js 的 模块 ， 
Bower 可 以 通过 npm 命 令 来 进行 安装 。 由 于 是 作为 本 地 命令 来 用 ， 因 此 最 好 对 它 进行 全 局 安装 ， 
命令 如 下 : 











$ npm install -g bower 


有 的 系统 中 的 普通 用 户 可 能 没有 权限 进行 全 局 安装 。 遇 到 这 种 情况 时 ,请 使 
> 用 超级 用 户 或 者 sudo 来 进行 安装 。 


安装 完成 后 ， 让 我 们 来 学 习 如 何 使 用 Bower。 与 npm 一 样 ，Bower 通 过 JSON 文 件 来 确定 所 要 
安装 的 包 和 版 本 。 在 应 用 的 根 目录 中 创建 一 个 bower.json 文 件 ， 并 为 其 输入 如 下 内 容 : 
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{ 
name: MEAN, 
version: 0.0.7, 
dependencies: { } 


} 

bowerjson 的 结构 与 package.json 的 结构 基本 一 致 。 上 述 代 码 定 义 了 项 目的 元 数据 ， 并 指定 了 
使 用 dependencies 属 性 来 存储 需要 用 到 的 前 端 库 。 后 续 内 容 中 我 们 会 对 该 字段 进行 填充 。 但 在 
那 之 前 我 们 还 是 看 看 Bower 的 配置 吧 。 






































要 使 用 Bower， 必 须 安 装 Git。 首 先 在 http:/git-scm.com/ 上 下 载 Git 安 装 包 ， 然 
后 将 其 安装 到 你 的 系统 即 可 。 如 果 你 使 用 的 是 Windows 系 统 ， 注 意 要 在 命令 行 中 
激活 Git， 或 者 通过 使 用 Git 命 令 行 工具 来 执行 所 有 Bower 相 关 命令 。 


7.3.2 配置 Bower 


Bower 在 依赖 包 的 安装 中 ， 将 会 下 载 安 装 包 ， 然 后 将 其 放 到 包 存 储 目 录 下 默认 为 应 用 根 
目录 下 的 bower_components 文 件 夹 。 但 实际 上 前 端 包 应 该 是 要 作为 静态 文件 提供 服务 的 ， 而 
MEAN 应 用 唯一 的 静态 文件 服务 目录 是 public 文 件 夹 , 因此 , 我 们 需要 对 Bower 的 默认 安装 路 径 进 
行 修改 。 通 过 .bowerrc 文 件 ， 即 可 对 Bower 的 安装 过 程 进 行 配置 。 

要 修改 Bower 的 默认 安装 位 置 ， 在 应 用 的 根 目 录 中 创建 一 个 .bowerrc 文 件 ， 并 为 其 输入 以 下 
代码 : 

{ 

directory: public/lib 


} 
经 此 设置 ，Bower 便 会 将 第 三 方 包 安 装 到 public/lib 文 件 夹 中 。 



































| 了 解 更 多 Bower 功 能 ， 请 参阅 http://bower.io 中 的 官方 文档 。 | 


7.3.3 ”使 用 Bower 安装 AngularJS 


Bower 安 装 和 配置 完成 后 ， 便 可 以 开始 安装 AngularJS 框 架 了 。 编 辑 bower.json 文 件 如 下 : 








{ 
name: MEAN, 
version: 0.0.7, 
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dependencies: { 
angular: ~1.2 
} 


上 述 代 码 将 使 Bower 安 装 AngularJS 1.2.x 的 最 新 版 。 使 用 命令 行 工 具 进 入 应 用 根 目 录 , 执行 如 
下 命令 来 使 用 Bower 安 装 Angular]JS: 





$ bower install 


这 样 便 可 获取 AngularJS 包 文件 ， 并 将 其 存储 到 public/lib/angular 文 件 夹 中 。AngularJS 的 安装 
便 完成 了 ， 下 一 步 需要 将 它 加 入 项 目 主 应 用 页 面 内 。 由 于 AngularJS 是 一 个 单 页 应 用 框架 ， 因 此 
所 有 的 应 用 逻辑 都 存放 在 单个 Express 应 用 页 面 内 。 





7.3.4 配置 AngularJS 


要 使 用 AngularJS, 需要 先 在 EJS 主 视图 文件 中 包含 框架 的 JavaScript 文 件 。 这 里 ,我 们 需要 在 
app/views/index.ejs 文 件 中 包含 框架 的 JavaScript 文 件 。 编 辑 agpp/views/index.ejs 文 件 如 下 : 




















<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
<%$ if (userFullName) { 多 > 
<h2>Hello <%$=userFullName%$> </h2> 
<a href="/signout">Sign out</a> 
< 多 } else { 多 > 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 





<%S } %> 


<script type="text/javascript" src="/lib/angular/angular.js"></script> 
</body> 
</html> 


这 样 就 在 应 用 主页 面 中 包含 了 AngularJS。 接 下 来 ， 让 我 们 来 看 看 如 何 组 织 AngularJS 应 用 的 
结构 。 


7.4 AngularJS 应 用 的 结构 


你 应 该 还 记得 第 3 章 中 关于 应 用 结构 的 讨论 ， 其 中 ， 应 用 结构 取决 于 应 用 的 复杂 程度 ， 在 该 
章 中 我 们 也 声明 本 书 的 示例 程序 采用 的 是 水 平方 法 来 组 织 整 个 MEAN 应 用 。 正 如 上 文 所 讲 ， 
MEAN 应 用 可 以 用 多 种 方式 来 组 织 。AngularJS 应 用 的 结构 是 AngularJS 开 发 团队 和 社区 讨论 的 一 
个 话题 。 基 于 不 同 的 目的 ， 存在 的 说 法 有 很 多 ， 既 有 简单 的 也 有 复杂 的 。 本 节 中 ， 我们 会 介绍 一 
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个 应 用 结构 作为 推荐 。AngularJS 是 前 端 框 架 ， 所 以 AngularJS 应 用 的 根 目录 就 是 Express 应 用 的 
public 目 录 ， 所 有 文件 都 是 以 静态 文件 的 方式 提供 服务 的 。 


AngularJS 开 发 团队 针对 应 用 的 复杂 程度 提供 了 不 同 的 应 用 结构 。 对 于 简单 的 应 用 来 讲 ， 使 
用 水 平 结构 即 可 。 水 平 结构 中 ,所 有 的 实体 都 根据 其 类 型 由 不 同 的 模块 或 者 文件 夹 进行 组 织 管理 ， 
主 应 用 文件 则 放 在 AngularJS 应 用 的 根 目 录 中 。 下 图 便 是 一 个 按 这 种 方法 组 织 的 应 用 结构 。 























全 AA DD public 
Name Kind 和 人 


config 
controllers Folder 
男 controllerl.js 
男 controller2.js 
CSS 
directives 
男 directivel.js 
男 directive2.js 
filters Folder 
男 filterl.js 
男 filter2.js 
img 
services 
转 servicel.js 
男 service2.js 
tests 
| views 
® viewl.html 
© view2.html 
男 application.js 




















水 平 结构 的 AngularJS 应 用 


正如 上 图 所 示 ， 对 简单 的 项 目 来 讲 ， 由 于 应 用 内 的 实体 较 少 ,水 平 结构 是 不 错 的 选择 。 但 对 
于 功能 繁多 实体 庞杂 的 复杂 应 用 来 讲 , 水 平 结构 忽略 程序 文件 行为 的 做 法 就 可 能 无 法 处 理 , 导致 
每 个 文件 夹 中 的 文件 过 多 ， 难 以 维护 。 为 此 ，AngularJS 团 队 提供 了 垂直 结构 方法 来 组 织 项 目 文 
件 。 垂直 结构 根据 文件 的 功能 相关 性 进行 组 织 ， 按 照 功能 或 者 部 类 ( section ) 将 不 同 的 文件 组 织 
在 一 起 一 一 这 其 实 与 第 3 章 中 的 垂直 方法 一 脉 相 承 ， 唯 一 不 同 的 是 ，AngularJS 每 个 部 类 和 逻辑 单 
元 ， 都 有 一 套 独立 的 模块 化 构成 ， 分 别 存储 在 位 于 AngularJS 应 用 的 模块 文件 夹 中 。 


下 图 便 是 一 个 典型 的 垂直 结构 的 AngularJS 应 用 。 
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[eee 习 public 


Name Kind 入 


La main Folder 
config 
controllers 
画 main.js 
Css 

本 directives F 

filters Folder 

i img - 
services Folder 

男 main.js JavaScript 

€ 
5 











古村 可 本 里 


> mn tests 
vw [views Folder 
© main.html HTML 
sectionl Folde 
v 国 config Folder 
. controllers Folder 
男 section1.js javascript 
CSS Folde 
directives 
filters 
"img 
9 services 
男 section1,js 
tests Folder 
vv i views Folder 
® sectionl.html HTML 
男 application.js JavaScript 


本 村 本 本 里 


























垂直 结构 的 AngularJS 应 


如 上 图 所 示 , 每 个 模块 都 用 各 自 的 子 文 件 夹 对 不 同类 型 的 实体 进行 组 织 , 这 样 便 可 实现 对 不 
同 部 类 的 封装 。 不 过 这 一 结构 同样 存在 一 个 附带 问题 。 在 开发 时 你 会 发 现 ，AngularJS 应 用 下 同 
一 个 部 类 中 有 很 多 功能 不 同 但 文件 名 相同 的 文件 。 这 个 问题 相当 普遍 , 它 会 导致 集成 开发 环境 或 
者 文件 编辑 器 的 使 用 变 得 很 不 方便 。 为 应 对 这 一 问题 , 我 们 在 第 3 章 中 用 到 了 一 个 比较 好 的 办 法 ， 
那 就 是 对 文件 命名 进行 约定 ， 下 图 的 组 织 和 命名 方式 就 要 清晰 得 多 。 

适当 的 对 文件 进行 命名 , 然后 将 其 放 人 合适 的 文件 夹 中 。 这样 便 可 以 有 效 帮 助 我 们 对 代码 进 
行 组 织 。 以 上 便 是 AngularJS 应 用 命名 和 组 织 的 最 佳 实践 ， 接 下 来 让 我 们 开始 构建 AngularJS 示 例 
应 用 。 


二 
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E 直 结构 的 AngularJS 应 用 的 文件 命名 约定 

















此 











7.5 引导 AngularJS 应 用 


我 们 将 使 用 手工 引导 机 制 来 引导 示例 AngularJS 应 用 。 这 样 可 以 更 好 地 控制 应 用 的 初始 化 流 
程 。 首 先 ， 删除 示例 应 用 public 目 录 下 除 lib 外 的 所 有 文件 ,然后 在 其 内 创建 application.js 文 件 ， 并 
为 其 输入 以 下 代码 : 


Var mainApplicationModuleName = 'mean'; 








Var mainApplicationModule = angular.module (mainApplicationModuleName, []); 


angular.element (document) .ready (function() { 
angular.bootstrap(document, [mainApplicationModuleNamel]); 


}); 

上 述 代 码 先 是 创建 了 一 个 存 有 应 用 主 模 块 名 的 变量 ,该 变量 将 会 在 使 用 angular .module () 
方法 创建 应 用 主 模块 时 用 到 。 接 着 通过 运用 angular 对 象 jqLite 的 功能 对 文档 加 载 完成 事件 进行 
了 绑 定 。 该 功能 通过 执行 angular .bootstrap () 方 法 来 使 用 刚刚 创建 的 应 用 主 模块 对 新 创建 的 
的 AngularJS 应 用 进行 初始 化 。 
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然后 到 index.ejs 视 图 文件 中 包含 上 面 的 JavaScript 文 件 。 为 验证 AngularJS 应 用 是 否 正 常 运行 ， 
我 们 可 以 通过 一 个 AngularJS 代 码 示 例 对 其 进行 测试 。 修 改 app/views/index.ejs 文 件 如 下 : 


<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
<%$ if (userFullName) { 多 > 
<h2>Hello <%$=userFullName%> </h2> 
<a href="/signout">Sign out</a> 
< 多 } else { 多 > 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 


< 和 外 } 各 > 


<section> 
<input type="text" id="textl1l" ng-model="name"> 
<input type="text" id="text2" ng-model="name"> 
</section> 


<script type="text/javascript" src="/lib/angular/angular.js"></script> 


<script type="text/javascript" src="/application.js"></script> 
</body> 
</html> 


上 述 代 码 引 用 了 新 应 用 的 JavaScript 文 件 ， 还 添加 了 两 个 文本 框 ， 并 在 文本 杠 上 使 用 了 
ng-model 指 令 , 用 以 演示 AngularJS 的 数据 绑 定 。AngularJS 测 试 应 用 就 完成 了 。 使 用 命令 行 工 具 
进入 整个 MEAN 应 用 的 根 目 录 ， 使 用 如 下 命令 启动 应 用 : 











$ node server 


应 用 启动 后 ,使 用 浏览 器 访问 http://localhost:3000/， 便 可 以 看 到 页 面 上 有 两 个 紧 挨 着 的 文本 
框 。 你 可 以 试 着 在 任 一 文本 框 里 输入 文字 , 会 发 现 男 一 文本 框 出 现 相 同 的 内 容 , 这 便 是 AngularJS 
的 双向 数据 绑 定 。 下 一 节 将 讨论 如 何 使 用 AngularJS 的 MVC 实 体 。 





7.6 AngularJS 的 MVC 实体 


AngularJS 是 一 个 自 成 一 体 的 框架 ， 它 支持 通过 使 用 MVC 设 计 模 式 来 创建 功能 强大 而 又 便于 
维护 的 Web 应 用 。 本 节 将 讨论 控制 器 、 视 图 ,以 及 使 用 scope 对 象 实现 的 数据 模型 。 首 先 ， 让 我 们 
来 按 MVC 模 式 创建 一 个 模块 。 在 public 文 件 夹 中 创建 一 个 模块 文件 夹 ， 命 名 为 example。 进 入 
example ,创建 controller 和 views 两 个 子 文件 来 ，example 模 块 的 文件 夹 结 构 就 创建 完成 了 。 接 着 在 
public/example 中 创建 example.client.module.js 文 件 ， 用 这 个 文件 来 存储 使 用 angular .module () 
方法 创建 的 新 AngularJS 模 块 。 在 新 建 的 example.clientmodule.js 文 件 中 输入 如 下 代码 : 























图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊 


用 
车 
| 





132 第 7 章 AngularJS 入 门 





angular.module('example', []); 


一 个 AngularJS 模 块 就 创建 完成 了 。 但 还 需要 在 应 用 页 面 中 包含 新 模块 文件 ， 并 在 应 用 主 模 
块 中 增加 对 新 模块 的 依赖 。 下 面 我 们 先 删除 前 面 添加 的 两 个 文本 框 ， 然 后 增加 一 个 新 的 SCRIPT 
标签 来 加 载 example 模 块 文件 。 编 辑 app/view/index.ejs 如 下 : 




















<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %></title> 
</head> 
<body> 
<% if (userFullName) { 各 > 
<h2>Hello <%=userFullName%> </h2> 
<a href="/signout">Sign out</a> 
<%$ } else { %> 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 


< 和 } $> 
<script type="text/javascript" src="/lib/angular/angular.js"></script> 
<script type="text/javascript" src="/example/example.client .module.js"></script> 


<script type="text/javascript" src="/application.js"></script> 











</body> 
</html> 
编辑 public/application.js 文 件 ， 在 应 用 主 模块 中 增加 对 example 模 块 的 依赖 ， 代 码 如 下 : 











Var mainApplicationModuleName = 'mean'; 


var mainApplicationModule = angular.module (mainApplicationModuleName, 
['example']); 


angular.element (document) .ready (function() { 
angular.bootstrap(document, [mainApplicationModuleNamel]); 


地 

修改 完成 后 , 可 以 重新 运行 MEAN 应 用 , 用 浏览 器 访问 看 是 否 存 在 什么 JavaScript 错 误 。 由 于 
我 们 还 没有 为 新 建 的 example 模 块 添加 任何 内 容 ， 所 以 应 用 没有 任何 变化 ， 但 新 定义 的 模块 已 经 
在 正常 运行 了 。 接 着 让 我 们 看 看 AngularJS 视 图 。 




















7.6.1 视图 


HTMIL 模 板 经 AngularJS 编 译 需 的 DOM 操 作 之 后 ， 便 是 AngularJS 的 视图 。 要 创建 视图 ， 可 在 
public/example/views 文 件 夹 中 创建 一 个 exampleclient.view.html 文 件 ， 并 为 其 输入 如 下 代码 : 
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<section> 
<input type=text id=textl1 ng-model=name> 
<input type=text id=text2 ng-model=name> 
</section> 


要 以 视图 的 方式 使 用 上 面 的 HTML 模 板 ， 则 可 修改 app/views/index.ejs， 代 码 如 下 : 


<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
<%$ if (userFullName) { %$> 
<h2>Hello <%$=userFullName%$> </h2> 
<a href="/signout">Sign out</a> 
< 和 } else { 多 > 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 
< 和 } 各 > 


<section ng-include="'example/views/example.client .view.html'"></section> 
<script type="text/javascript" src="/lib/angular/angular.js"></script> 
<script type="text/javascript" src="/example/example.client.module.js"></script> 
<script type="text/javascript" src="/application.js"></script> 

</body> 


</html> 


述 代码 通过 ng-includqe 指 令 ， 便 可 通过 指定 的 路 径 对 模板 进行 加 载 。 编 译 器 会 将 视图 的 
re 所 在 的 DOM 元 素 中 。 使 用 命令 行 工具 进入 MEAN 应 用 的 根 目录 ， 执 行 如 下 
命令 运行 应 用 : 














$ node server 


应 用 运行 起 来 后 ， 使 用 浏览 器 进入 http://localhost:3000/， 便 可 以 看 到 与 我 们 之 前 删除 的 两 个 
文本 框 类 似 的 布局 , 它们 的 功能 也 相同 , 但 它们 是 通过 视图 来 实现 的 。 视图 是 个 相当 不 错 的 功能 ， 
如 果 能 配合 控制 器 ， 它 将 发 挥 更 大 的 作用 。 














7.6.2 ”控制 器 和 scope 


控制 器 大 多 是 构造 函数 ，AngularJS 用 它 来 实例 化 出 新 的 控制 嚣 对象。 这样 做 的 目的 是 为 了 
增加 数据 模型 引用 对 象 一 scope。AngularJS 团 队 将 scope 设 计 为 视图 和 控制 器 之 间 的 粘 合剂 ， 通 
过 scope 对 象 ， 控 制 器 对 模型 的 修改 便 可 快速 反应 到 视图 上 ， 反 之 亦 然 ， 控 制 器 对 视图 的 修改 也 
可 以 反应 到 模型 上 。 
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使 用 ng-controller 指 令 便 可 创建 控制 右 实 例 。AngularJS 编 译 屁 从 指令 中 获取 控制 絮 名 ， 
通过 依赖 注入 传 和 人 scope 对象， 初始 化 出 新 的 控制 器 实例 。 然 后 控制 器 便 可 对 scope 对 象 进行 初始 
化 及 功能 扩展 了 。 


由 于 DOM 中 的 元 素 都 是 树 状 组 织 的 ，scope 也 模仿 了 这 一 结构 。 这 表明 所 有 的 scope 都 有 父 级 
scope 一 一 没有 父 级 scope 的 只 有 一 个 ， 即 根 scope (root scope )。 这 一 点 非常 重要 ， 因 为 除了 能 够 
访问 自 有 模型 之 外 ，scope 还 继承 了 其 父 级 scope 的 模型 。 因 此 在 当前 的 scope 找 不 到 某 一 个 指定 的 
属性 时 ，Angular 便 会 查找 其 父 级 scope， 不 断 往 上 遍历 ， 直 到 找到 或 者 到 达 根 scope。 


为 了 更 好 地 理解 ， 让 我 们 用 控制 器 为 视图 创建 一 个 简单 的 模型 。 进 入 public/example/ 
controllers 文 件 夹 ， 创 建 一 个 名 为 example.client.controllerjs 的 文件 ， 并 为 其 输入 如 下 代码 : 












































angular.module('example') .controller('ExampleController', ['$scope', 
function($scope) { 
Sscope.name = 'MEAN Application'; 


} 
把 


上 述 代码 中 ， 我 们 首先 向 angular .mogdule () 方 法 传人 一 个 字符 串 参 数 example。 根 据 上 文 
对 该 方法 的 介绍 可 知 ， 这 是 为 查找 名 为 example 的 模块 。 接着 使 用 模块 的 controller () 方 法 创建 
了 一 个 名 为 Bxamplecontrollez 的 构造 函数 ， 函 数 内 使 用 依赖 注入 的 方法 注 人 了 gs$scope 对 象 。 
最 后 ， 为 Sscope 对 象 定 义 了 名 为 name 的 属性 ， 这 一 属性 在 后 面 的 视图 中 将 会 用 到 。 为 使 用 该 新 
建 的 控制 器 ， 需 要 首先 在 应 用 主页 面 中 包含 控制 器 的 JavaScript 文 件 ， 并 在 视图 中 使 用 
ng-controller 指 令 来 指明 使 用 它 。 先 修改 应 用 主页 面 的 模板 文件 app/views/index.ejs, 代码 如 下 : 


<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org"> 
<head> 
<title><%$= title %$></title> 
</head> 
<body> 
< 多 if (userFullName) { %> 
<h2>Hello <%$=userFullName%> </h2> 
<a href="/signout">Sign out</a> 
< 各 } else { %> 
<a href="/signup">Signup</a> 






































<a href="/signin">Signin</a> 


<%$ } %$> 

<section ng-include="'example/views/example.client.view.html'"></section> 
<script type="text/javascript" src="/lib/angular/angular.js"></script> 

<script type="text/javascript" src="/example/example.client.module.js"></script> 


<script type="text/javascript" src="/example/controllers/example.client. 
controller.js"></script> 
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<script type="text/javascript" src="/application.js"></script> 
</body> 
</html> 


修改 视图 文件 public/example/views/example.client.view.html， 如 下 所 示 : 


<section ng-controller=ExampleController> 
<input type=text id=textl1 ng-model=name> 
<input type=text id=text2 ng-model=name> 
</section> 


修改 完成 。 对 新 控制 器 进行 测试 ， 首先 使 用 命令 行 工具 进入 MEAN 应 用 的 主 目录 ,执行 如 下 
命令 运行 应 用 : 





$ node server 


应 用 运行 起 来 后 ， 使 用 浏览 器 访问 http://localhost:3000/， 两 个 文本 框 将 再 次 出 现 。 不 过 这 两 
个 文本 框 不 再 为 空 ， 而 是 包含 着 代码 中 指定 的 初始 值 “MEAN Application”。 

虽然 通过 使 用 控制 器 、 视 图 和 scope， 我 们 便 可 以 成 功 地 对 应 用 进行 创建 ， 不 过 AngularJS 为 
我 们 提供 的 远 不 止 于 此 。 下 一 节 ， 我 们 将 使 用 ngRout e 来 蔡 换 ng-include， 讨论 如 何 使 用 路 由 
来 管理 应 用 。 












































7.7 AngularJS 路 由 


如 果 AngularJS 不 提供 路 由 功能 的 话 , 要 遵循 MVC 架 构 进 行 开 发 将 难以 实现 。 上 文 的 代码 中 ， 
你 可 能 发 现 ng-incluge 提 供 了 类 似 于 路 由 的 功能 ,但 车 要 用 它 来 管理 多 个 视图 ， 可 能 会 引起 一 
些 混乱 。 为 此 ，AngularJS 团 队 开 发 了 可 以 定义 不 同 URL 路 径 及 对 应 模板 的 模块 一 -ngRoute， 
有 了 它 ， 就 可 以 根据 用 户 请 求 的 路 径 来 实现 不 同 的 页 面 填充 。 


AngularJS 是 一 个 单 页 应 用 框架 ， 因 此 ngRoute 是 在 浏览 器 之 内 对 路 由 进行 管理 。 这 意味 着 
AngularJS 的 路 由 并 不 是 从 服务 器 获取 相应 的 Web 页 面 , 而 是 加 载 相应 的 模板 对 其 进行 编译 , 并 将 
得 到 的 结果 放 人 特定 的 DOM 元 素 之 中 。 服 务 器 只 是 将 模板 以 静态 文件 的 形式 发 给 浏览 器 ， 而 且 
不 会 响应 ngRoute 控 制 下 的 URL 路 径 变 化 。 如 此 一 来 , Express 便 成 为 了 专门 提供 API 服 务 的 后 端 。 
下 面 ， 我 们 先 从 ngRoute 的 安装 开始 。 












































ngRoute 支 持 两 种 URL 模 式 , 一 种 是 用 来 兼容 老 版 本 浏览 器 的 传统 模式 ， 即 

在 URL 尾 部 # 之 后 的 兼容 路 由 模式 ， 另 一 种 是 支持 浏览 器 历史 记录 API 的 HTML5 

~ 路 由 模式 ,很 多 版 本 较 新 的 浏览 器 都 支持 后 者 。 本 书 中 为 支持 更 多 版 本 的 浏览 器 ， 
使 用 前 者 。 
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7.7.1 安装 ngRoute 模块 


ngRoute 的 安 


name: MEAN, 

version: 0.0.7, 

dependencies: { 
angular: ~1.2， 
angular-route: ~1.2 


} 


装 很 简单 ， 打 开 bower.json 文 件 ， 并 对 其 进行 


如 下 修改 : 


然后 在 MEAN 应 用 的 根 目录 中 运行 如 下 的 命令 即 可 安装 ngRoute: 


$ bower update 


7M 





安装 完成 后 ， 便 可 以 在 public/lib 下 看 到 名 为 angular-route 的 新 文件 来。 接着 要 在 应 用 主页 





中 包含 


<!DOCTYPE html> 


<html xmlns:ng="http://angularjs 


<head> 

<title><%$= title %$></title> 
</head> 
<body> 

< 多 if (userFullName) { %> 


<h2>Hello <% 


新 的 模块 文件 ， 修 改 app/views/index.ejs 如 下 : 


OPG 


=userFullName%> </h2> 


<a href="/signout">Sign out</a> 
<%$ } else { %$> 

<a href="/signup">Signup</a> 

<a href="/signin">Signin</a> 
< 和 } $> 
<section ng-include="'example/views/example.client.view.html'"></section> 
<script type="text/javascript" src="/lib/angular/angular.js"></script> 
<script type="text/javascript" src="/lib/angular-route/angular-route.js"> 

</script> 

<script type="text/javascript" src="/example/example.client.module.js"></script> 
<script type="text/javascript" src="/example/controllers/example.client. 


controller.js"></script> 


<script type="text/javascript" 
</body> 
</html> 


然后 再 到 应 用 主 模块 中 添加 ngRoute 模 块 的 依赖 ， 





var mainApplicationModuleName = 


Var mainApplicationModule = 
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['ngRoute', 'example']); 
angular.element (document) .ready (function() { 
angular.bootstrap (document, [mainApplicationModuleName]); 


} 
完成 上 述 修改 ，ngRoute 模 块 即 安装 成 功 ， 接 下 来 便 可 对 其 进行 配置 使 用 了 。 





7.7.2 配置 URL 模式 


默认 情况 下 , ngRoute 使 用 URL 中 # 之 后 的 部 分 来 进行 路 由 。URL 中 # 之 后 部 分 一 般 都 用 于 页 
内 导航 ， 因 此 当 这 部 分 发 生变 化 时 ， 浏 览 器 不 会 向 服务 器 发 送 请 求 。 这 一 特性 使 得 AngularJS 的 
路 由 模式 可 以 支持 很 多 版 本 较 旧 的 浏览 器 。AngularJS 路 由 通常 都 类 似 于 http://localhost:3000/#/ 


example。 


不 过 , 单 页 应 用 还 有 个 致命 的 缺陷 。 搜 索引 擎 怜 虫 无 法 对 单 页 应 用 进行 索引 , 非常 不 利于 搜 
索引 擎 优化 (SEO )。 为 此 ， 主 流 的 搜索 引擎 提供 了 一 个 办 法 ， 让 开发 人 员 可 以 为 单 页 应 用 做 标 
记 。 搜 索引 擎 仆 虫 在 抓 取 被 标记 的 页 面 时 ， 会 等 到 所 有 的 AJAX 操 作 执 行 完 成 ， 填 充 好 各 路 径 的 
结果 再 离开 。 使 用 Hashbangs 便 可 以 对 单 页 应 用 的 路 由 进行 标记 ， 只 需要 在 # 之 后 增加 一 个 ! 即 
可 ，URL 类 似 于 http://localhost:3000/#!/example。 


幸运 的 是 ，AngularJS 提 供 了 对 Hashbangs 的 支持 ,通过 一 个 简单 的 路 由 模块 配置 和 
$locationProvider 服 务 即 可 实现 。 在 我 们 的 示例 应 用 中 ， 可 以 通过 修改 public/application.js 文 
件 来 完成 ， 文 件 修 改 如 下 : 










































































Var mainApplicationModuleName = 'mean'; 
var mainApplicationModule = angular.module (mainApplicationModuleName, ['ngRoute', 
'example']); 


mainApplicationModule.config(['s$locationProvider', 
function($locationProvider) { 
$locationProvider.hashprefix('!'); 
} 
]); 


angular.element (document) .ready (function() { 


angular.bootstrap (document, [mainApplicationModuleNamel]); 
人 


应 用 的 URL 模 式 配 置 便 完成 了 ， 下 面 让 我 们 用 ngRoute 来 配置 第 一 个 路 由 吧 。 


7.7.3 AngularJS 应 用 路 由 
ngRoute 封 装 了 几 个 主要 实体 来 提供 对 路 由 的 管理 。 先 来 看 看 SrouteProviaer 对 象 , 它 提 
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供 了 多 个 用 于 定义 路 由 行为 的 方法 。 我 们 可 以 在 创建 模块 配置 块 时 ， 利 用 依赖 注入 传 入 
routeProvider 对 象 , 然后 用 它 来 定义 路 由 。 在 public/example 文 件 夹 中 创建 config 目 录 , 然后 在 
新 建 目 录 中 创建 文件 public/example/config/example.client.routes.js， 并 为 其 输入 如 下 内 容 : 


angular.module('example') .config(['S$routepProvider', 
function($SrouteProvider) { 
SrouteProvider. 


when('/', { 
templateUrl: 'example/views/example.client.view.html' 
Fs 
otherwisel(t{ 
redirectTo: '/' 
} 3 
} 
| 


上 述 代 码 中 ,我 们 通过 angular .module() 方 法 取得 了 example 模 块 ,再 执行 模块 的 config () 
方法 创建 新 的 配置 块 , 然后 注入 SrouteProvider 对 象 , 再 用 $routeProvider .when () 方 法 创 
建新 路 由 。 该 方法 的 第 一 个 参数 即 路 由 的 URL， 第 二 个 参数 对 象 是 可 选项 ， 可 用 来 定义 模块 的 
URL。 当 用 户 进入 一 个 没有 定义 的 路 径 时 , 便 执行 SrouteProvider .otherwise() 方 法 中 的 定 
义 。 这 里 我 们 直接 把 用 户 指 向 了 上 面 定 义 的 路 由 ， 即 /路 由 。 


ngRoute 模 块 中 另 一 个 重要 内 容 是 ng-view 指 令 。 该 指令 用 于 告诉 AngularJS 将 路 由 中 的 视图 
填充 到 哪 一 个 DOM 元 素 。 当 用 户 进 入 特定 的 URL ，AngularJS 便 会 将 视图 填充 的 结果 替换 到 
ng-view 指 令 标 记 的 DOM 元 素 中 。 下 面 我 们 在 示例 程序 上 实现 一 下 。 首 先 在 应 用 主页 面 内 包含 
新 建 的 路 由 配置 文件 ， 并 添加 一 个 使 用 ng-view 指 令 的 元 素 , 修改 app/views/index.ejs 文 件 ， 代码 
如 下 : 


<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org"> 
<head> 
<title><%$= title %$></title> 
</head> 
<body> 
< 多 if (userFullName) { %> 
<h2>Hello <%=userFullName%> </h2> 
<a href="/signout">Sign out</a> 
<%$ } else { %> 
























































<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 
< 和 } $> 


<section ng-view></section> 


<script type="text/javascript" src="/lib/angular/angular.js"></ script> 
<script type="text/javascript" src="/lib/angular-route/angularroute.js"></script> 


<script type="text/javascript" src="/example/example.client.module.js"></script> 
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<script type="text/javascript" src="/example/controllers/example.client. 
controller.js"></script> 


<script type="text/javascript" src="/example/config/example.client. 
EOUtESL 可 SG 


<script type="text/javascript" src="/application.js"></script> 
</body> 
</html> 


一 个 简单 的 路 由 就 配置 完成 了 。 对 上 述 配置 进行 测试 , 首先 使 用 命令 行 工具 进入 MEAN 应 用 
的 根 目 录 ， 运 行 如 下 命令 启动 应 用 : 














$ node server 

启动 完成 后 ， 使 用 浏览 器 访问 http:Wlocalhsot:3000/ ， 你 会 发 现 页 面 将 自动 跳 转 到 
http://localhost:3000 人 #!/， 这 是 AngularJS 的 路 由 模块 完成 的 。 这 就 意味 着 路 由 配置 已 经 生效 ,页 面 
的 内 容 还 是 两 个 文本 框 。 






































了 解 更 多 关于 ngRoute 模 块 的 信息 ， 可 以 查阅 http:/docs.angularjs.org/api/ 
~> ngRoute 上 的 官方 文档 。 


7.8 AngularJS 服务 


AngularJS 的 服务 都 是 独立 的 实体 , 用 于 AngularJS 应 用 之 内 ,以 实现 不 同 实体 间 的 数据 共享 。 
比如 用 于 从 服务 器 获取 数据 ， 共 享 缓存 数据 ， 或 者 向 AngularJS 组 件 中 注入 全 局 对 象 ， 等 等 。 
个 服务 是 作为 一 个 实例 而 存在 的 ， 因 此 可 以 在 AngularJS 应 用 内 任何 两 个 没有 关联 的 实体 之 间 实 
现 双向 数据 绑 定 。 服 务 有 两 类 ， 一 是 AngularJS 预 置 的 ， 另 一 类 是 自 定义 的 。 


























7.8.1 预 置 服务 
AngularJS 对 一 些 常 用 的 功能 进行 了 抽象 ， 封 装 成 多 种 服务 ， 主 要 有 以 下 几 种 。 


口 Shttp: 用 于 处 理 AJAX 请 求 

口 sresource: 用 于 处 理 REST 风 格 的 API 

口 Slocation: 用 于 进行 URL 操 作 

口 sq: 用 于 处 理 promise 操 作 

口 SrootScope: 用 于 返回 根 scope 对 象 

口 Swinqow: 用 于 返回 浏览 器 的 window 对 象 
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AngularJS 团 队 还 在 不 停 维护 着 其 他 大 量 的 扩展 模块 。 不 过 AngularJS 还 有 一 个 关于 服务 的 特 
色 功 能 ， 那 便 是 自 定义 服务 。 





| 访问 http://docs.angularjs.org/api/， 可 以 详细 了 解 AngularJS 集 成 的 服务 。 | 


7.8.2 自 定 义 服务 


不 论 是 为 了 更 好 的 可 测试 性 , 还 是 为 了 代码 重用 而 包装 全 局 对 象 , 自 定义 服务 都 是 AngularJS 
应 用 开发 中 不 可 或 缺 的 一 部 分 。 用 于 创建 服务 的 ， 有 三 个 模块 方法 ，proviaer() 、service() 
和 factory()， 它 们 都 可 以 通过 传人 服务 名 和 服务 函数 来 进行 创建 ， 有 以 下 几 点 不 同 。 


口 broviqer() : 最 复杂 的 方法 ， 同 时 也 是 最 全 面 的 方法 。 

D service () : 用 于 将 一 个 服务 定义 为 原型 , 从 服务 函数 中 获取 一 个 新 的 独立 的 对 象 的 情形 。 
口 factory () : 用 于 提供 调用 函数 返回 值 一 类 的 服务 ， 一般 用 于 在 应 用 内 实现 数据 和 对 象 
的 共享 访问 的 情形 。 


在 日 常 开发 中 , 使 用 service() 和 factory () 的 情况 会 比较 多 一 些 , provider () 方 法 有 些 
太 过 隆重 。 下 面 的 代码 便 是 用 factory () 方 法 来 创建 一 个 服务 : 
angular.module('example') .factory ('ExampleService', | 


function() { 
return true; 














} 
] ) ; 


下 面 使 用 的 是 service () 方 法 : 


angular.module('example') .service('ExampleService', | 
function() { 
this.someValue = true; 





this.firstMethod = function() { 
} 


this.secondMethod = function() { 
于 
3 
1 


以 后 你 会 慢 慢 熟悉 这 几 种 不 同 的 创建 服务 的 方法 。 
| AngularJS 官 方 文档 中 也 有 几 种 创建 自 定义 服务 方法 的 详细 说 明 ， 请 访问 
~ http: 








/docs.angularjs.org/guide/providers。 
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fs 


来 ， 


7. 


待 


EJS 视 图 中 直接 填充 use 


7 


汶 

















8.3 ”服务 的 使 用 





AngularJS 的 服务 使 用 很 简单 ， 只 需要 将 服务 注入 AngularJS 组 件 中 即 可 。 下 面 的 代码 便 是 在 
example 模 块 中 使 用 ExampleService 服 务 : 








angular.module('example') .controller('ExampleController', ['S$scope', 'ExampleService', 


function($scope, ExampleService) { 
Sscope.name = 'MEAN Application'; 

lj 

由 人 
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这 便 可 以 在 控制 器 中 使 用 Exampleservice 服 务 了 , 这 样 即 可 实现 信息 的 共享 和 利用 。 接 下 
让 我 们 看 看 如 何 使 用 服务 来 解决 MEAN 开 发 中 一 个 重要 问题 。 


AngularJS 应 用 中 的 身份 验证 永远 都 是 社区 中 的 一 个 重要 话题 。 关 键 在 于 服务 器 执行 完 用 户 
的 身份 验证 后 , 作为 客户 端的 AngularJS 应 用 如 何 知 晓 并 保存 相关 的 状态 。 一 个 方法 是 使 用 $http 
服务 来 查询 用 户 的 身份 验证 状态 ， 但 这 个 方法 的 缺陷 在 于 整个 AngularJS 应 用 的 所 有 组 件 都 得 等 
请 求 的 返回 , 这 一 过 程 中 引发 的 矛盾 是 肯定 要 解决 的 。 另 一 种 方法 , 则 是 直接 由 Express 应 用 在 











.9.1 将 user 对 象 填充 到 视图 
要 想 把 完成 身份 验证 的 user 对 象 填充 到 EJS 视 图 中 , 需要 做 几 方 面 的 修改 。 先 来 修改 控制 器 ， 








辑 app/controllers/index.server.controller.js 文 件 如 下 : 
exports.render = function(req, res) { 
res.render('index', { 


title: 'Hello World', 

user: JSON.stringify (req.user) 
ey 
} 


再 修改 模板 文件 app/views/index.ejs 文 件 如 下 : 


<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 

<title><%= title %></title> 
</head> 
<body> 

<% if (user) { %> 

<a href="/signout">Sign out</a> 
<%$ } else { %$> 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊 





r 对 象 ， 然 后 以 AngularJS 服 务 的 方式 来 进行 封装 。 





用 
车 
| 





142 第 7 章 AngularJS 入 门 





<a href="/signup">Signup</ 
<a href="/signin">Signin</ 
< 和 } $> 


<section ng-view></section> 


Eee 
a> 


<script type="text/javascript"> 


window.user = <%- user || 


</script> 

<script type="text/javascrip 
<script 

<script type="text/javascript 
<script type="text/javascrip 


<script type="text/javascrip 
'></script> 


GONErFOLLErr ISS CrLOtS 
S 


routes.j 














<script type="text/javascrip 
</body> 
</html> 


‘null' %>; 


t" src="/lib/angular/angular.js"></script> 


type="text/javascript" src="/lib/angular-route/angularroute.js"></script> 


src="/example/example.client.module.js"></script> 
t" src="/example/controllers/example.client. 


t"src="/example/config/example.client. 





t" src="/application.js"></script> 








user 对 象 便 会 被 转换 为 JSON 字 符 串 放 到 应 用 的 主 视图 里 。AngularJS 应 用 引导 时 ,身份 验证 











的 状态 便 已 经 保存 好 了 。 只 要 用 户 完成 了 验证 ，user 对 象 便 会 有 值 ， 否 则 会 为 空 (NULL )。 下 
面 青 来 看 看 如 何 利用 服务 在 AngularJS 应 用 内 共享 user 对 象 中 的 信息 。 


7.9.2 添加 身份 验证 服务 











最 好 是 将 所 有 的 用 户 逻辑 包装 在 一 个 名 为 users 的 模块 之 内 ,再 将 Authentication 服 务 也 








public/users/users.client.module.js 文 件 ， 


angular.module('users', []); 


再 到 public/users/services/ 文 件 夹 中 























里 闭 在 其 中 。 进 入 public 目 录 , 创建 一 个 名 为 users 的 目录 ， 进 入 其 内 ， 再 创建 services 目 录 。 新 建 





代码 如 下 : 


创建 authentication.client.service.js 文 件 ， 代 码 如 下 : 


angular.module('users') .factory('Authentication', [ 


function() { 
this.user = window.user; 


return { 
user: this.user 


3 


Is 


这 样 便 实现 了 在 AngularJS 服 务 中 引用 window .user 对 象 。 再 到 应 用 主页 面 中 包含 上 面 创 建 
的 服务 和 模块 文件 ， 修 改 app/views/index.ejs 文 件 如 下 : 
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<!DOCTYPE html> 


<html xmlns:ng="http://angularjs.org"> 


<head> 
<title><%= title %$></title> 
</head> 
<body> 
< 多 if (user) { 各 > 


<a href="/signout">Sign out</a> 


< 多 } else { 多 > 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 


< 各 } 多 > 


<section ng-view></section> 


<script type="text/javascript"> 


window.user = <%- user || 'null' %>; 


</script> 


<script type="text/javascript" 
<script type="text/javascript" 


<script type="text/javascript" 

<script type="text/javascript" 
CONtroller. Zs"></Seripts 

<script type="text/javascript" 
</SCript> 


<script type="text/javascript" 
<script type="text/javascript" 
service.js"></script> 


<script type="text/javascript" 
</body> 
</html> 


src="/lib/angular/angular.js"></script> 
src="/lib/angular-route/angularroute.js"></script> 


src="/example/example.client.module.js"></script> 
src="/example/controllers/example.client. 


src="/example/config/example.client.routes.js"> 


src="/users/users.client .module.js"></script> 
src="/users/services/authentication.client. 


src="/application.js"></script> 








还 需要 在 AngularJS 应 用 主 模块 中 包含 users 模 块 的 依赖 。 另 外 还 需要 解决 的 是 Facebook 身 份 
验证 后 的 跳 转 bug 一 一 在 OAuth 来 回 的 调用 中 , 会 在 URL 的 # 后 面 增加 字符 。 修 改 public/application.js 


文件 如 下 : 


var mainApplicationModuleName = 


'mean'; 


Var mainApplicationModule = angular.module (mainApplicationModuleName, 


['ngRoute', 'users', 'example'] 


’ 


mainApplicationModule.config(['$locationPprovider', 


function($locationProvider) { 


SlocationpProvider.hashPrefix('!'); 


} 
本 


if (window.location.hash === '# =_') window.location.hash = '#!'; 


angular.element (document) .ready (function() { 
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angular.bootstrap(document, [mainApplicationModuleNamel]); 


}); 


users 模 块 和 Authentication 服 务 便 完成 了 , 最 后 一 步 , 便 是 在 其 他 的 AngularJS 组 件 中 使 
用 这 里 的 Authentication 服 务 了 。 





7.9.3 ”使 用 身份 验证 服务 


只 须 在 需要 使 用 身份 验证 的 AngularJS 实 体 中 注入 Authentication 服 务 , 便 可 以 使 用 user 
对 象 了 。 比 如 我 们 要 在 example 控 制 需 中 使 用 Authentication 服 务 ， 只 要 修改 public/example/ 
controllers/example.client.controller.js 文 件 如 下 : 





angular.module('example') .controller('ExampleController', ['S$scope', 'Authentication', 
function($scope, Authentication) { 
Sscope.name = Authentication.user ? Authentication.user.fullName : 'MEAN 


Application'; 
} 
1)3 
上 面 的 代码 中 ， 先是 将 authentication 注 和 人 example 控 制 需 中 ， 并 引用 了 模型 中 的 fiela 
字段 。 使 用 命令 行 工 具 进 入 MEAN 应 用 的 根 目 录 ， 执 行 如 下 命令 : 








$ node server 


程序 运行 后 ， 在 浏览 器 中 访问 主页 http://localhost:3000/#!/， 注 意 两 个 文本 框 的 内 容 ， 然 后 登 
陆 ， 成功 之 后 再 回 到 首页 观察 一 下 文本 杠 ， 你 将 看 到 不 同 的 结 








7.10 总结 


本 章 介 绍 了 AngularJS 的 基本 原理 。 首 先 通过 核心 概念 了 解 了 AngularJS 应 用 的 架构 。 接 着 介 
绍 了 如 何 使 用 Bower 安 装 AngularJS ， 如 何 组 织 项 目 结 构 和 引导 AngularJS 应 用 。 然 后 讨论 了 
AngularJS 的 MVC 实 体 结构 及 其 使 用 。 还 使 用 ngRoute 模 块 来 配置 应 用 的 路 由 模式 。 最 后 ， 学 习 
了 如 何 使 用 AngularJS 服 务 , 以 及 使 用 服务 来 管理 用 户 的 身份 验证 MEAN 的 四 大 部 分 已 经 全 部 介 
绍 完了 ， 下 一 章 将 学 习 如 何在 MEAN 中 创建 CURD 模 块 。 
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创建 MEAN 的 CURD 模 块 














在 前 面 的 内 容 中 ， 我 们 学 习 了 各 个 框架 的 配置 。 本 章 将 在 MEAN 应 用 中 实现 基本 操作 的 集 
合 一 一 CURD 模 块 ( 增删 改 查 模块 )。CURD 模 块 由 一 些 基 本 的 实体 组 成 ， 这 些 实体 都 具有 基本 
的 添加 、 查 看 、 更 新 和 删除 实体 实例 的 功能 。 在 MEAN 应 用 中 ，CURD 模 块 既 包括 服务 器 端的 
Express 组 件 ， 还 包含 浏览 器 端的 AngularJS 客 户 端 模块 。 本 章 主要 内 容 有 : 











口 建立 Mongoose 模 型 

口 创建 Express 控 制 器 

口 编写 Express 路 由 

口 创建 和 组 织 AngularJS 模 块 

口 AngularJS ngResourc e 模 块 简介 
口 实现 AngularJS 的 MVC 模 块 





8.1 CURD 模块 简介 


CURD 模 块 是 MEAN 应 用 的 基本 构件 。 一 个 CURD 模 块 包含 两 个 MVC 结 构 ， 功 能 分 布 在 
AngularJS 和 Express 两 部 分 。Express 部 分 包括 一 个 Mongoose 模 型 、 一 个 Express 控 制 咒 和 对 应 的 
Express 路 由 文件 。AngularJS 部 分 相对 复杂 一 点 ， 包 含 多 个 视图 ， 一 套 AngularJS 控 制 器 、 服 务 和 
路 由 配置 。 本 章 将 讨论 如 何 将 上 面 这 几 部 分 结合 在 一 起 , 创建 出 一 个 Article CURD 模 块 。 本 章 
的 示例 应 用 基于 上 一 章 ， 因 此 可 以 将 第 7 章 中 示例 程序 的 最 终 版 复制 一 份 ， 用 于 本 章 示 例 。 




















8.2 配置 Express 组 件 


要 建立 CURD 模 块 的 Express 部 分 , 首先 需要 创建 一 个 Mongoose 模 型 , 用 于 验证 和 存储 文章 数 
据 。 然后 是 创建 用 于 处 理 模块 业务 逻辑 的 Express 控 制 器 , 最 后 是 为 控制 器 方法 创建 REST 风 格 API 
的 路 由 。 让 我 们 先 从 Mongoose 模 型 开始 。 
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8.2.1 创建 Mongoose 模型 





Mongoose 模 型 包含 了 Article 实 体 的 四 个 属性 。 进 入 ap/models/ 文 件 夹 ， 创 建 Mongoose 模 型 
文件 article.servermodeljs， 并 为 其 输入 以 下 代码 : 





dol 


var mongoose = require('mongoose'), 
Schema = mongoose.SsSchema; 


Var ArticleSchema = new Schema({ 
created: { 
type: Date, 
default: Date.now 
} 
title: { 
type: String, 
default: '"' 
Cr i te, 
required: 'Title cannot be blank' 
ks 
content: { 
type: String, 
default: '' 
trim: true 
hs 
creator: { 
type: Schema.ObjectId, 
ref: 'User' 
} 
} :2 





mongoose.model ('Article', ArticleSchema); 


前 面 也 有 和 上 面 类 似 的 代码 段 。 首先 ， 上述 代码 包含 了 模型 的 依赖 模块 ,然后 使 用 Mongoose 
的 Schema 对 象 创 建 了 Articleschema， 用 于 定义 模型 的 如 下 几 个 字段 。 


D created: 存储 文章 的 创建 时 间 。 

口 title: 存储 文章 的 标题 ， 使 用 了 required 验 证 器 ， 标 明 是 必需 字段 。 
口 content: 存储 文章 的 内 容 。 

D creator: 引用 对 象 ， 用 于 标明 文章 的 作者 。 





























最 后 注册 了 Mongoose 模 型 Article， 方 便 后 面 在 控制 器 中 使 用 它 。 然 后 将 新 的 模型 加 入 应 
用 之 中 ， 编 辑 config/mongoose.js 如 下 : 











Var config = require('./config'), 
mongoose = require('mongoose'); 


module.exports = function() { 
var db = mongoose.connect (config.db); 
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require('../app/models/user.server.model'); 
require('../app/models/article.server.model'); 


return db; 


5 
模型 文件 的 加 载 便 完 成 了 ,应 用 中 便 可 使 用 Article 模 型 。 模 型 配置 完成 以 后 , 便 可 以 创建 
Articles 控 制 器 了 。 














8.2.2 ”建立 Express 控制 器 


Express 控 制 器 负责 管理 服务 器 端 与 articles 相 关 的 功能 。 它 包含 一 系列 的 MongoDB 中 文档 的 
CURD 操 作 。 进 入 app/controllers 目 录 ， 创 建文 件 articles.servercontrollerjs， 在 文件 中 增加 如 下 的 
依赖 : 


Var mongoose = require('mongoose'), 
Article = mongoose.model ('Article'); 


控制 器 中 便 实 现 了 对 Mongoose 模 型 Article 的 包含 , 在 逐个 实现 CURD 方 法 之 前 , 最 好 是 创 
建 一 个 用 于 处 理 验证 和 处 理 各 类 服务 器 错误 的 错误 处 理 函 数 。 
1. 错误 处 理 函 数 方法 


为 处 理 Mongoose 的 各 种 错误 ， 本 书 建议 你 创建 一 个 简单 的 错误 处 理 函 数 ， 以 便 将 Mongoose 
的 错误 对 象 转换 为 简单 的 错误 消息 ， 再 返回 给 控制 器 的 各 个 方法 。 编 辑 刚 刚 创 建 的 控制 器 文件 
app/controllers/articles.server.controllerjs， 追 加 如 下 代码 : 









































Var getErrorMessage = function(err) { 
if (err.errors) { 
for (var errName in err.errors) { 
if (err.errors[lerrName] .message)return err.errorsl[lerrNamel] .message; 
} 
} else { 
return 'Unknown server error'; 
} 
}; 


将 Mongoose 的 错误 对 象 以 参数 的 方式 传 给 getErrorMessage () 方 法 , 该 方法 从 错误 集合 中 
遍历 ， 然 后 返回 第 一 个 有 message 属 性 的 错误 message， 这 样 便 不 会 一 下 抛 给 用 户 一 大 堆 错 误 。 
错误 处 理 方法 完成 后 ， 便 可 以 开始 创建 控制 器 的 方法 了 。 











2. create () 方 法 


Express 控 制 器 的 create () 方 法 用 于 创建 一 个 新 的 MongoDB article 文 档 。 该 方法 先 从 HTTP 
请 求 对 象 中 获取 JSON 对 象 ,用 这 个 JSON 对 象 来 创建 相应 的 文档 , 再 调用 Mongoose 模 型 的 save () 
方法 保存 到 MongoDB。 打 开 控 制 器 文件 app/controllers/articles.server.controllerjs， 追 加 如 下 代码 : 











时 
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exports.create = function(req, res) { 
Var article = new Articlel(req.body); 
article.creator = req.user; 


article.save(function(err) { 
if (err) { 
return res.status(400) .sendl({ 
message: getErrorMessage (err) 
} 
} else { 
res.json(article); 
} 
二 
} 四 


上 述 代码 中 ， 首 先 使 用 HTTP req .body 创 建 了 模型 的 实例 ， 接 着 将 经 过 Passport 身 份 验 证 的 
当前 用 户 设 置 为 文章 的 creator。 然后 调用 Mongoose 模 型 实例 的 save () 方 法 保存 article 文 档 。 在 
save() 的 回调 函数 中 ， 根 据 保存 过 程 是 否 出 错 ， 返 回 不 同 的 请 求 响应 。 如 果 出 错 了 ， 则 调用 错 
误 处 理 函 数 得 到 相应 的 错误 消息 作为 啊 应 内 容 , 并 设置 响应 的 HTTP 状态 码 为 400; 如 果 没 有 错误 ， 
则 将 article 对 象 转换 为 RON 作为 响应 返回 。create () 方 法 完成 后 ， 就 要 实现 读 取 操 作 了 。 读 
取 操 作 包 括 两 种 方法 ,一 种 是 获取 文章 列表 ,， 另 一 种 是 获取 某 个 特定 的 文章 ， 先 来 看 看 如 何 获取 
文章 列表 。 




















3. list() 方 法 


Express 控 制 器 的 1ist () 方 法 用 于 实现 返回 文章 列表 的 操作 。 该 操作 先 使 用 Mongoose 模 型 的 
fina () 方 法 获取 所 有 文档 , 再 将 其 转换 为 JSON 输 出 。 为 实现 该 方法 , 编辑 app/controllers/articles. 
server.controller.js， 追 加 如 下 代码 : 

















exports.list = function(req, res) { 
Article.find() .sort('-created') .populate('creator', 'firstName lastName fullName'). 
exec (function(err, articles) { 
if (err) { 
return res.status(400) .sendl({ 
message: getErrorMessage (err) 
和 
} else { 
res.json(articles); 
} 
3 
站 


这 里 使 用 的 是 Mongoose 的 find () 函数 , 获取 了 article 集 合 的 所 有 文档 。 在 查询 过 程 中 使 用 了 
排序 ,获取 的 文档 按照 created 进 行 排序 ,还 使 用 了 pupulate () 方 法 将 user 对 象 的 fristName、 
lastName 和 fullName 属 性 填充 到 了 articles 对 象 的 creator 属 性 中 。 


剩 下 的 CURD 操 作 都 是 针对 单个 已 有 文档 的 。 当 然 也 可 以 使 用 同一 个 逻辑 在 各 个 方法 中 单独 
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实现 单个 文档 的 获取 操作 , 不 过 Express 的 路 由 提供 了 一 个 专门 的 功能 一 一 路 由 参数 功能 , 完全 可 
以 通过 路 由 参数 中 间 件 获取 单个 文档 ， 再 提供 给 各 个 方法 操作 ， 从 而 节约 时 间 ， 降 低 代码 元 余 。 


4. read() 中 间 件 


Express 控 制 右 的 reagd ( ) 方 法 用 于 提供 从 数据 库 中 读 取 已 有 文档 这 一 基本 操作 。 后 面 要 编写 
的 多 个 REST 风 格 API 中 ， 通 常 是 把 文章 ID 以 路 由 参数 的 方式 传 进 来 ， 再 调用 read ( ) 方法 处 理 。 
为 此 ， 向 服务 器 发 起 相关 请 求 时 ， 需 要 将 articleIdq 参 数 包含 在 请 求 路 径 中 。 


Express 的 路 由 提供 了 req.param() 方 法 来 处 理 路 由 参数 ， 通 过 它 ， 可 以 设置 让 包含 
articleId 路 由 参数 的 请 求 均 先 经 过 特定 的 中 间 件 处 理 ， 中 间 件 便 可 通过 articleId 从 
MongoDB 中 检索 出 对 应 的 article 对 象 ， 并 将 其 添加 到 请 求 对 象 中 。 这 样 ， 所 有 针对 已 有 文档 
进行 操作 的 控制 器 方法 便 可 以 通过 请 求 对 象 来 获取 article 对 象 , 下 面 来 实现 一 下 该 路 由 参数 中 
间 件 ， 在 app/controllers/articles.server.controller.js 文 件 中 追加 如 下 代码 : 










































































exports.articleByID = function(req, res, next, id) { 
Article.findById(id) .populate('creator', 'firstName lastName fullName') .exec 
(function(err, article) { 
if (err) return next (err); 
if (!article) return next (new Error('Failed to load article ' + id)); 


req.article = article; 
next (); 

}); 
过 

在 上 面 的 中 间 件 函数 中 ， 除 了 Express 中 间 件 的 标准 参数 外 ， 还 有 个 ia 参数 。 中 间 件 通过 ia 
参数 来 查找 article 对 象 ， 并 在 请 求 对 象 中 建立 对 它 的 引用 。 注 意 ， 其 中 使 用 了 Mongoose 模 型 
的 popular() 方 法， 向 article 对 象 的 creator 属 性 填充 了 与 用 户 相 关 的 fristName 、 


lastName 和 fullName 字 上 段 。 


在 后 面 添 加 Express 路 由 时 ， 便 可 知道 如 何在 不 同 的 路 由 中 使 用 articlieByIgd() 中 间 件 。 不 
过 首先 让 我 们 为 控制 器 添加 read() 方 法 ， 该 方法 用 于 返回 article 对 象 ， 在 app/controllers/ 
articles.server.controller.js 文 件 中 追加 如 下 代码 : 











exports.read = function(req, res) { 

res.json(req.article); 
js 
很 简单 吧 ? 因为 article 对 象 已 经 在 articleByID() 中间 件 中 获取 完成 了 ， 在 这 里 只 需要 
将 它 使 用 JSON 输 出 即 可 。 在 将 中 间 件 与 路 由 结合 之 前 ， 先 来 实现 一 下 其 他 几 个 增删 改 查 控制 器 
方法 。 
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5. update() 方 法 

控制 器 的 update () 方 法 提供 了 对 已 有 文档 修改 的 基本 操作 。 将 article 作 为 基本 对 象 ， 使 
用 HTTP 请 求 主体 中 的 title 字 段 和 content 字 段 来 更 新 , 并 使 用 Mongoose 模 型 的 save () 方 法 将 
修改 保存 到 数据 库 中 。 要 实现 该 方法 ， 可 在 app/controllers/articles.server.controller.js 文 件 中 追加 如 
下 代码 : 


exports .updqate = function(req, res) { 
var article = req.article; 

















article.title = regq.body.title; 
article.content = reg.body.content; 


article.save(function(err) { 
if (err) { 
return res.status(400) .sendl(t{ 
message: getErrorMessage (err) 
Fs 
} else { 
res.json(article); 
} 
有) 这 
3 


updaate() 方 法 同样 假定 已 经 通过 articleByID() 中间 件 获取 了 相应 的 article 对 象 。 因 此 
只 需要 修改 title 和 content 字 段 、 将 文档 保存 并 将 修改 后 的 对 象 以 JSON 格 式 输出 即 可 。 如 果 
出 错 了 ， 则 先 修 改 HTTP 错 误 码 ， 青 将 错误 通过 get ErrorMessage() 方 法 进行 处 理 后 再 输出 。 

















这 样 ， 增 诅 改 查 Express 控 制 器 方法 还 璋 最 后 一 个 delete() 方 法 ,最 后 来 看 看 如 何 实 现 该 
方法 。 











6. delete() 方 法 


控制 器 的 aelete () 方 法 提供 了 对 现 有 article 文 档 删 除 这 一 基本 操作 。 通 过 Mongoose 模 型 的 
remove () 方 法 将 article 对 象 从 数据 库 中 删除 。 要 实现 该 方法 ， 在 app/controllers/articles. 
server.controller.js 文 件 中 追加 如 下 代码 : 


exports.delete = function(req, res) { 
var article = req.article; 


article.remove (function(err) { 
if (err) { 
return res.status(400) .sendl({ 
message: getErrorMessage (err) 
9 
} else { 
res.jsonl(article); 


} 
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区 
} 

















同样 , aelete () 方 法 依然 是 在 articleByID() 中 间 件 已 经 获取 的 article 对 象 的 基础 上 操 
作 的 。 只 需要 调用 Mongoose 模 型 的 remove () 方 法 ， 并 将 删除 的 对 象 用 JSON 格 式 输出 即 可 。 如 
果 出 错 了 ， 则 先 修改 HTTP 错 误 码 ， 再 将 错误 通过 getErrorMessage() 方 法 进行 处 理 后 再 输出 。 











这 样 ， 增 删改 查 Express 控 制 此 方法 便 全 部 完成 了 。 在 编写 调用 这 些 方法 的 Express 路 由 之 前 ， 
需要 再 花 点 时 间 实 现 两 个 鉴 权 中 间 件 。 





7. 实现 身份 验证 中 间 件 
































在 编写 Express 控 制 器 方法 的 时 候 , 不 难 发 现 大 多 数 方法 是 需要 对 用 户 的 身份 进行 验证 的 。 比 
如 , 如果 rea.user 对 象 为 空 的 话 , 是 不 能 调用 create () 方 法 的 。 虽 然 也 可 以 在 控制 器 方法 中 对 
redc.user 进 行 检查 ， 但 这 将 会 产生 大 量 重 复 的 校 验 代码 。 其 实 可 以 用 Express 链 式 中 间 件 来 禁止 
未 验证 的 请 求 调用 控制 器 方法 。 首 先 需要 实现 的 是 对 用 户 身份 进行 验证 的 中 间 件 。 在 此 前 的 
Express 控 制 器 users 里 已 经 实现 了 一 些 与 身份 验证 相关 的 方法 ， 因 此 最 好 是 在 其 内 实现 身份 验证 
中 间 件 。 在 app/controllers/users.server.controller.js 文 件 中 追加 如 下 代码 : 





























exports.requiresLogin = function(req, res, next) { 
if (!req.isAuthenticated()) { 
return res.status(401) .send({ 
message: 'User is not logged in' 


requiresLogin() 中 间 件 通过 调用 Passport 提 供 的 req.isaAuthenticated() 来 验证 用 户 
是 否 通 过 了 身份 验证 。 如 果 发 现 用 户 已 经 登录 过 了 ， 则 调用 中 间 件 链条 上 的 下 个 中 间 件 ; 否则 将 
会 修改 HTTP 错 误 码 ， 并 返回 验证 失败 的 响应 。 这 个 中 间 件 很 强大 ,但 如 果 要 确定 某 个 用 户 是 否 
有 操作 某 个 文档 的 权限 ， 则 需要 一 个 针对 特定 文档 的 授权 中 间 件 。 





























8. 实现 授权 中 间 件 





在 增删 改 查 模块 中 , 有 两 个 是 针对 已 有 article 文 档 进 行 修改 的 方法 。 通 常情 况 下 , update () 
和 delete() 方 法 都 有 使 用 限制 , 只 有 创建 者 可 以 调用 。 因 此 对 于 任何 需要 执行 这 些 方法 的 请 求 ， 
都 需要 检查 编辑 者 是 否 的 确 是 文档 的 创建 者 。 为 此 ， 可 以 在 Article 控 制 器 增加 一 个 授权 中 间 件 。 
在 app/controllers/articles.server.controller.js 文 件 中 追加 如 下 代码 : 























exports.hasAuthorization = function(req, res, next) { 
if (req.article.creator.id !== req.user.id) { 
return res.status(403) .sendl({ 
message: 'User is not authorized' 
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hasaAuthorization() 中 间 件 通过 rea.article 对 象 和 red.user 对 象 来 确定 当前 操作 的 
用 户 是 否 是 文章 的 创建 者 ,该 中 间 件 也 假定 调用 它 的 请 求 是 包含 有 articleId 路 由 参数 的 ,这 样 ， 
方法 和 中 间 件 便 全 部 准备 好 了 ， 下 一 步 编写 路 由 来 执行 它们 。 






































8.2.3 编写 Express 路 由 


在 开始 编写 Express 路 由 之 前 ， 首 先 来 回顾 一 下 REST 风 格 API 的 体系 结构 设计 。REST 风 格 的 
API 提 供 了 一 致 的 服务 结构 来 标识 对 应 用 资源 完成 的 操作 接口 集合 ， 即 这 类 API 通 过 预定 义 的 路 
由 结构 ， 连 同 不 同 的 HTTP 方 法 名 来 识别 语 境 ， 以 响应 不 同 的 HTTP 请 求 。REST 风 格 的 架构 实现 
方式 多 样 ， 但 通常 都 基于 以 下 几 点 来 实现 。 























口 每 个 资源 一 个 基本 URL， 在 这 里 是 nttp://localhost:3000/articles。 
口 使 用 JSON 作 为 数据 结构 格式 ， 通 过 请 求 包 体 传送 。 
口 使 用 标准 的 HTTP 方 法 ， 如 GET、POST、PUT 和 DELETE。 


基于 以 上 三 点 , 便 可 合理 地 将 HTTP 请 求 发 送 给 对 应 的 控制 器 方法 。 因 此 文档 相关 的 API 主 要 
有 如 下 五 个 。 























D GET http://localhost:3000/articles: 用 于 返回 文章 列表 

口 PosT http://localhost:3000/articles: 用 于 创建 并 返回 新 文章 

DGET http://localhost:3000/articles/:articleId: 用 于 请 求 特定 单个 文章 
口 PUT http://localhost:3000/articles/:articleId: 用 于 更 新 并 返回 文章 

口 DELETE http://localhost:3000/articles/:articleId: 用 于 删除 并 返回 文章 


上 述 路 由 的 控制 器 方法 已 经 在 前 面 的 内 容 中 准备 好 了 ， 路 由 参数 中 间 件 articleIda 也 已 实 


现 ， 剩 下 的 便 是 实现 Express 的 路 由 了 。 进 入 app/routes 文 件 夹 ， 创 建 articles.serverroutes.js 文 件 ， 
代码 如 下 : 


























Var users = require('../../app/controllers/users.server.controller'), 
articles = require('../../app/controllers/articles.server.controller'); 


module.exports = function(app) { 
app.route('/api/articles') 
.get (articles.1list) 
.Dost (users.requiresLogin, articles.create); 


app.route('/api/articles/:articleId') 


.get (articles.read) 
.Dut (users.requiresLogin, articles.hasAuthorization, articles.update) 
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.delete(users.requiresLogin, articles.hasAuthorization, articles.delete); 


app.param('articleId', articles.articleByID); 
}; 


上 述 代 码 主要 完成 了 如 下 几 件 事情 ， 首 先是 包含 了 users 和 articles 的 控制 器 ， 接 着 使 用 
app. route() 方 法 定义 了 增删 改 查 操作 的 基本 路 由 URL， 并 使 用 Express 的 路 由 方法 为 特定 的 
HTTP 请 求 指定 相应 的 控制 器 方法 。 请 注意 PosT 方 法 使 用 了 users.requiresLogin() 中 间 件 ， 
用 以 确保 只 有 登录 用 户 才能 新 建文 档 。 而 PJUT 和 DELETE 方 法 则 同时 使 用 了 users .requires- 
Login() 和 articles.hasAuthorization() 这 两 个 中 间 件 , 使 得 用 户 只 能 删除 和 编辑 自己 创建 
的 文档 。 最 后 ， 使 用 了 app .param() 以 确保 有 articleId 参 数 的 路 由 都 会 先 调用 articles. 
articleByID() 中间 件 。 下 一 步 , 需要 配置 Express 应 用 , 使 其 加 载 新 建 的 Article 模 型 和 路 由 文件 。 























8.2.4 配置 Express 应 用 


为 了 让 Express 使 用 新 增加 的 增删 改 查 操作 ， 需 要 配置 应 用 来 加 载 路 由 文件 。 修 改 
config/express.js 文 件 如 下 : 





Var config = require('./config'), 
express = require('express'), 
morgan = require('morgan'), 
compress = require('compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'), 
flash = require('connect-flash'), 
passport = require('passport'); 


module.exports = function() { 
Var app = express(); 





if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE_ ENV === 'production') { 


app.use (compress ()); 


} 


app.use (bodyParser.urlencoded(t{ 
extended: true 

] 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


app.use(session({ 
saveUninitialized: true, 
resave: true, 
secret: config.sessionSecret 
} 
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app.set ('views', './app/views'); 
app.set ('view engine', 'ejs'); 


app.use (flash()); 
app.use (passport.initialize()); 
app.use (passport.session()); 


require('../app/routes/index.server.routes.js') (app); 
require('../app/routes/users.server.routes.js') (app); 
require('../app/routes/articles.server.routes.js') (app); 


app.use (express.static('./public')); 


return app; 


} . 


现在 , 与 文档 相关 的 REST 风 格 API 便 全 部 完成 了 ! 下 一 步 , 我 们 将 学 习 如 何 使 用 ngResource 
模块 来 简单 地 实现 Express 应 用 与 AngularJS 实 体 之 间 的 通信 。 





























8.3 ngResource 模块 简介 





在 第 7 章 中 , 曾 提 及 使 用 $http 服 务 可 以 实现 AngularJS 应 用 与 后 端 API 的 通信 。s$http 服 务 提 
供 的 是 HTTP 请 求 较 为 低级 的 接口 ， 同 时 AngularJS 开 发 团队 也 给 出 了 为 处 理 REST 风 格 API 的 开发 
人 员 提 供 更 大 帮助 的 方法 。REST 的 体系 是 结构 化 的 , 因此 很 多 处 理 AJAX 请 求 的 客户 端 代码 可 以 
通过 更 高 级 的 接口 来 简化 操作 。 为 此 ，AngularJS 开 发 团队 推出 了 ngResource 模 块 ， 为 开发 人 员 
提供 更 为 简便 的 与 REST 风 格 数据 源 通信 的 方法 。 它 通过 设计 模式 中 的 工厂 方法 来 表现 ， 用 来 创 
建 ngResource 对 象 以 处 理 REST 风 格 资源 的 基本 路 由 。 下 一 小 节 将 介绍 它 的 工作 原理 ， 不 过 
ngResource 是 扩展 模块 ， 因 此 需要 先 用 Bower 来 安装 。 
























































8.3.1 安装 ngResource 模块 


为 安装 ngResource 模 块 ， 修 改 bowerjson 文 件 ， 如 下 所 示 : 





{ 
"name": "MEAN", 
"Version™ ys AT OO 
"dependencies": { 
"angulLar es Tol 
"angular-route": "~1.2", 
"angular-resource": "~1.2" 


a 


然后 用 命令 行 工作 进入 MEAN 应 用 根 目 录 ， 执 行 如 下 命令 安装 新 的 ngResource 模 块 : 
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$ bower update 


Bower 安 装 完 新 的 依赖 后 ， 便 会 在 public/lib 中 创建 一 个 名 为 angular-resource 的 文件 夹 。 下 一 
步 便 是 在 应 用 主页 面 中 包含 模块 文件 ， 修 改 app/views/index.ejs 如 下 : 


<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
< 多 if (user) { 各 > 
<a href="/signout">Sign out</a> 
< 多 } else { 多 > 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 








< 外 } %$> 


<section ng-view></section> 


<script type="text/javascript"> 
window.user = <%- user || 'null' %>; 
</script> 


<script type="text/javascript" src="/lib/angular/angular.js"></script> 

<script type="text/javascript" src="/lib/angular-route/angularroute.js"></script> 

<script type="text/javascript" src="/lib/angular-resource/angularresource.js"> 
</script> 


<script type="text/javascript" src="/example/example.client.module.js"></script> 

<script type="text/javascript" src="/example/controllers/example.client. 
controller.js"></script> 

<script type="text/javascript" src="/example/config/example.client.routes.js"> 


</script> 
<script type="text/javascript" src="/users/users.client.module.js"></script> 
<script type="text/javascript" src="/users/services/authentication. 


client.service.js"> </script> 























<script type="text/javascript" src="/application.js"></script> 


</body> 

</html> 

最 后 ,需要 将 ngResource 模 块 加 入 应 用 模块 的 依赖 列表 中 ， 修 改 public/application.js 如 下 : 
Var mainApplicationModuleName = 'mean'; 


var mainApplicationModule = angular.module (mainApplicationModuleName, 
['ngResource', 'ngRoute', 'users', 'example']); 


mainApplicationModule.config(['$locationPprovider', 


function($locationProvider) { 
SlocationProvider.hashprefix('!'); 
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] 学 


if (window.location.hash === '# = ') window.location.hash = '#!'; 


angular.element (document) .ready (function() { 
angular.bootstrap(document, [mainApplicationModuleNamel]); 


}); 
述 操作 执行 完 后 ，ngResource 便 配置 完成 ， 可 以 使 用 了 。 





8.3.2 ”使 用 $resource 服务 





ngResouorce 模 块 为 开发 人 员 提供 了 一 个 新 的 工厂 模式 ， 可 以 将 该 模块 注入 AngularJS 实 体 


中 。 向 $resource 工 厂 传人 一 个 基础 URL 和 配置 选项 对 象 ， 便 可 简单 地 实现 与 REST 风 格 后 端的 
通信 。 要 使 用 ngResource 模 块 ， 只 需要 调用 sresource 的 工厂 方法 即 可 ， 该 方法 将 会 返回 一 外 




















sresource 对 象 。 工 厂 方法 可 接受 如 下 四 个 参数 。 


口 Url1: 基础 URL 加 使 用 冒号 做 前 缀 的 参数 ， 如 /users/ :userId。 

口 ParamDefaults: URL 参 数 的 默认 值 ， 既 可 以 是 硬 编码 的 值 ， 也 可 以 是 使 用 @ 做 前 级 的 
字符 串 ， 这 样 便 可 以 从 数据 对 象 中 获取 值 作为 参数 值 。 

D Actions: 对 象 ， 用 于 表示 扩展 默认 资源 动作 集 的 自 定义 方法 。 

口 options: 对 象 ， 用 于 表示 扩展 SresourceProvider 默 认 行 为 的 自 定义 选项 。 


返回 的 ngResource 对 象 通过 多 个 方法 来 处 理 默认 的 REST 风 格 资 源 路 由 ,还 可 使 用 自 定 义 方 
































法 进行 随意 扩展 。 默 认 的 资源 方法 有 如 下 几 个 。 








D get () : 使 用 HTTP cr 方法 请 求 ， 并 将 响应 结果 导出 为 JSON 对 象 。 

D save () : 使 用 HTTP PosT 方 法 请 求 ， 并 将 响应 结果 导出 为 JSON 对 象 。 

口 auery () : 使 用 HTTP GET 方 法 请 求 ， 并 将 响应 结果 导出 为 JSON 数 组 。 

口 remove () : 使 用 HTTP DELETE 方 法 请 求 ， 并 将 响应 结果 导出 为 JSON 对 象 。 
D aelete(): 使 用 HTTP DELETE 方 法 请 求 ， 并 将 响应 结果 导出 为 JSON 对 象 。 


调用 上 述 几 个 方法 ， se 并 发 起 特定 的 HTTP 方 法 、URL 和 参数 的 HTTP 请 
求 。sresource 实 例 方 法 会 立即 返回 一 个 空 的 对 象 引 用 ， 当 服务 器 响应 请 求 返回 数据 后 , 便 会 用 
数据 玉 填 充 对 针 引 用 。 当 然 也 可 以 传人 个 回调 了 数 ， 当 空 对 象 引用 补充 时 便 立 执行 。 下 而 













































































便 是 一 个 简单 的 Sresource 工 厂 方法 示例 : 


Var Users = S$resource('/users/:userId', { 
userId: '@id' 
学 


Var user = Users.get ({ 
userId: 123 
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}, function() { 
user.abc = true; 
user.$save(); 


了 
注意 ， 也 可 以 在 











ll 








充 好 的 引用 对 象 中 使 用 sresource 方 法 。 其 原因 在 于 sresource 方 法 能 


够 返回 由 数据 字段 填充 的 Sresource 实 例 。 下 一 节 将 学 习 如 何 使 用 $resource 的 工厂 方法 与 











Express API 进 行 通信 。 








8.4 实现 AngularJS 的 MVC 模块 


CRUD 模 块 的 第 二 大 部 分 是 AngularJS MVC 模 块 。 该 模块 包括 一 个 但 
与 Express API 进 行 通信 的 AngularJS 服 务 ， 一 个 包含 客户 端 模 块 逻辑 的 AngularJS 控 人 














用 Sresource 工 厂 方法 
判 器 ， 以 及 多 


个 提供 给 用 户 进行 增删 改 查 操 作 的 界面 视图 。 在 创建 AngularJS 实 体 前 ， 先 来 创建 模块 的 初始 结 
构 。 进 入 public 文 件 夹 ， 创 建 名 为 articles 的 文件 夹 ， 进 入 新 创建 的 子 文 件 夹 ， 创 建 模块 初始 化 文 
件 articles.client.module.js， 并 为 其 输入 如 下 代码 : 


angular.module('articles', []); 


上 述 代码 将 对 模块 进行 初始 化 , 除 此 之 外 ,还 需要 将 新 的 模块 作为 依赖 添加 到 主 应 用 模块 中 。 


修改 pubilc/application.js 文 件 如 下 : 


var mainApplicationModuleName = 'mean 


es 
’ 


var mainApplicationModule = angular.module (mainApplicationModuleName, 
['ngResource', 'ngRoute', 'users', 'example', 'articles']); 


mainApplicationModule.config(['$locationPprovider', 


function($locationProvider) { 


SlocationPprovider.hashPrefix('!'); 


if (window.location.hash === '#_=_') window.location.hash = '#!'; 


angular.element (document) .ready (function() { 
angular.bootstrap(document, [mainApplicationModuleName]); 


}); 








开始 。 


8.4.1 创建 模块 服务 











这 样 便 可 以 对 新 建 模 块 进行 加 载 , 接 下 来 就 可 以 开始 创建 模块 实体 了 , 先 从 模块 的 服务 部 分 











为 了 使 CRUD 模 块 更 方便 地 与 后 端 API 通 











言 ， 本 书 建议 将 sresource 工 厂 方法 
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AngularJS 服 务 中 。 为 此 ,进入 public/articles 文 件 夹 , 创建 名 为 services 的 文件 夹 ， 进 入 新 的 子 文件 
来， 创建 articles.client.service.js 文 件 ， 并 为 其 输入 如 下 代码 : 


angular.module('articles') .factory('Articles', ['S$resource', function($resource) { 
return S$resource('api/articles/:articleId', { 
articleId: 'Q@_ id' 
站 下 
update: { 
method: 'PUT' 
} 
小 
3 


服务 中 用 的 Sresource 工 厂 方法 有 三 个 参数 : 后 端 资 源 的 基础 URL、 指 定 文档 _id 字 段 为 值 
的 路 由 参数 以 及 一 个 通过 使 用 updaate () 方 法 对 资源 方法 进行 扩展 的 动作 参数 。 其 中 , update () 
方法 使 用 的 是 HTTP PUT 方法 。 这 样 ， 该 模块 服务 便 提 供 了 与 服务 器 端 进行 通信 所 需 的 所 有 功能 。 
在 后 面 的 内 容 中 会 用 到 这 些 功能 。 

















8.4.2 ”建立 模块 控制 器 


前 面 提 到 ， 模 块 的 逻辑 全 部 都 集中 在 AngularJS 控 制 器 里 。 在 这 里 ， 控 制 器 提供 了 执行 增删 
改 查 操作 所 需要 的 所 有 方法 。 第 一 步 要 创建 控制 器 文件 。 进 入 public/articles/ 文 件 夹 ， 创 建 一 个 名 
为 controllers 的 文件 夹 , 进入 子 文件 夹 , 创建 文件 articles.client.controllerjs, 并 为 其 输入 如 下 代码 : 
angular.module('articles') .controller('ArticlesController', ['S$scope', 
'$SrouteParams', 'S$location', 'Authentication', 'Articles', 


function($scope, SrouteParams, S$location, Authentication, Articles) 


{ 














Sscope.authentication = Authentication; 
} 
)3 


新 的 ArticlesController 使 用 了 四 个 注入 服务 。 


口 srouteParams: 由 ngRoute 模 块 提 供 ， 存 储 了 后 面 需要 定义 的 AngularJS 路 由 的 路 由 
D slocation: 用 于 控制 应 用 的 导航 。 

口 Authentication: 该 服务 创建 于 之 前 的 内 容 ， 用 于 提供 用 户 身份 验证 信息 。 

口 articles: 该 服务 创建 于 上 一 小 节 ， 用 于 提供 一 系列 用 于 同 REST 风 格 后 端 通信 的 方法 。 


另 一 个 需要 注意 的 地 方 是 将 authentication 服务 绑 定 到 控制 器 的 sscope 上 ， 这 样 才能 在 
视图 中 使 用 它 。 控 制 器 的 定义 就 完成 了 ， 实 现 控制 器 的 增删 改 查 方法 就 比较 简单 了 。 





























1. create () 方 法 
AngularJS 控 制 需 的 create () 方 法 用 于 提供 创建 文档 这 一 基本 操作 。 调 用 该 方法 时 ， 将 从 视 
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图 中 获取 title 和 content 两 个 字段 ， 通 过 Articles 服 务 与 对 应 的 后 端 REST 接 口 通信 ， 最 终 将 
新 文档 进行 保存 。 要 实现 create() 方法， 先 打开 public/articles/controllers/articles.client. 
controllerjs， 向 控制 器 的 构造 函数 中 添加 如 下 代码 : 
$scope.create = function() { 
Var article = new Articles({ 
Elit le tiieatitle. 


content: this.content 
} 


article.$save(function(response) { 
Slocation.path('articles/' + response._id); 
}, function(errorResponse) { 
$scope.error = errorResponse.data.message; 
ee 
站 
先 来 看 看 create () 的 功能 。 首 先 ， 它 通过 视图 字段 中 的 title 和 content， 以 及 Articles 
资源 服务 创建 了 一 个 新 的 文档 资源 。 接 着 使 用 文档 资源 的 $Ssave () 方 法 将 新 article 对 象 发 送 给 
对 应 的 后 端 REST 接 口 ， 同 时 还 传送 了 两 个 回调 函数 。 其 中 , 前 一 个 是 HTTP 请 求 服 务 器 成 功 后 返 
回 200 状 态 码 时 执行 的 回调 ， 它 使 用 $location 服 务 导 航 到 刚 创建 文档 的 路 由 。 后 一 个 是 HTTP 
请 求 服务 器 失败 后 返回 错误 状态 码 时 执行 的 回调 ， 它 会 将 错误 消息 赋 给 $scope 对 象 ， 再 由 视图 
呈现 给 用 户 。 





























2. find() 和 findone() 方 法 

控制 器 需要 两 个 不 同 的 读 取 article 方 法 ， 一 个 用 于 检索 单个 article ， 一 个 用 于 检查 多 个 
article。 这 两 个 方法 都 需要 使 用 Articles 服 务 与 后 端 REST 接 口 通信 。 要 实现 这 两 个 方法 ， 先 打 
开 public/articles/controllers/articles.client.controllerjs， 向 控制 器 的 构造 函数 中 添加 如 下 代码 : 














Sscope.findq = function() { 
Sscope.articles = Articles.query(); 


}; 


$scope.findOone = function() { 
sscope.article = Articles.get({ 
articleId: SrouteParams .articleId 
网 下 
上 述 代码 定义 了 两 个 方法 。find () 方 法 ,用 于 检索 article 列 表 ，findone () 方 法 ， 可 以 根据 
路 由 参数 articleiId 来 检索 单个 article。 这 两 个 函数 都 是 直接 从 前 面 定义 的 基础 URL 直 接 获 取 数 
据 ，fing() 方 法 需要 请 求 列 表 ， 所 以 使 用 了 资源 的 query () 方 法 ， 而 findone () 方 法 则 使 用 资 
源 的 $get () 方 法 来 检索 单个 文档 。 注 意 ， 这 两 个 方法 都 把 结果 赋 给 了 $scope 变 量 ,， 这样 视 图 才 
可 以 将 数据 显示 出 来 。 
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3. update() 方 法 


AngularJS 控 制 器 的 update () 方 法 用 于 提供 对 现存 article 进 行 修改 这 一 基本 操作 。 为 此 ， 需 
要 使 用 sscope.article 变 量 ， 并 通过 视图 的 HTML 输 入 元 素 对 其 进行 修改 ， 再 用 Articles 服 
务 与 后 端 REST 接 口 通信 来 保存 修改 后 的 文档 。 要 实现 update() 方 法 ， 先 打开 public/articles/ 
controllers/articles.client.controller.js ， 问 控制 絮 的 构造 函数 中 添加 如 下 代码 : 









































sscope.update = function() { 
$sscope.article.s$update(function() { 
$slocation.path('articles/' + $scope.article._id); 
}, function(errorResponse) { 
Sscope.error = errorResponse.data.message; 
}); 
上 


在 update() 方 法 中 ,使 用 了 article 资 源 的 Supdate() 方 法 将 修改 后 的 article 对 象 发 送 给 
后 端 REST 接 口 ， 同 时 还 传人 了 两 个 回调 函数 。 前 一 个 是 HTTP 请 求 服务 器 成 功 后 返回 200 状 态 码 
时 执行 的 回调 ， 它 使 用 $location 服 务 导航 到 刚 修改 文档 的 路 由 。 后 一 个 是 HTTP 请 求 服务 器 失 
败 后 返回 错误 状态 码 时 执行 的 回调 ， 它 会 将 错误 消息 赋 给 sscope 对 象 ， 再 由 视图 呈现 给 用 户 。 


4. aelete() 方 法 




















AngularJS 控 制 器 的 update() 方 法 用 于 删除 现存 article 。 用 户 可 能 在 article 的 1ist 视 图 和 
readq 视 图 执行 删除 操作 ， 因 此 aelete () 会 用 到 sscope.article 和 sscope.articles 变 量 。 
这 意味 着 删除 操作 可 能 要 考虑 必要 时 从 $scope.articles 集 合 中 对 已 删除 文档 进行 移 除 的 情 
况 。 在 此 还 是 使 用 Articles 服 务 与 后 端 REST 接 口 通信 删除 文档 。 要 实现 aelete () 方 法 ， 先 打 
开 public/articles/controllers/articles.client.controller.js， 向 控制 器 的 构造 函数 中 添加 如 下 代码 : 























sscope.delete = function(article) { 
if (article) { 


article.Sremove (function() { 
for (var i in Sscope.articles) { 
if (Sscope.articles[i] === article) { 


sscope.articles.splice(i, 1); 
} 
} 
2 
} else { 
sscope.article.s$remove (function() { 
Slocation.path('articles'); 
站 了 
应 


delete() 方 法 首先 对 是 在 列表 还 是 从 查看 中 执行 删除 进行 了 区 分 。 然 后 使 用 article 的 
sremove () 方 法 来 调用 后 端 REST 接 口 。 如 果 用 户 是 在 1ist 视 图 中 删除 的 article ， 接 着 还 要 从 
sscope.articles 中 删除 相应 的 对 象 。 如 果 是 在 read 视 图 , 则 直接 删除 $scope .article 对 象 ， 
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并 回 到 1ist 视 图 。 


控制 器 便 建立 完成 了 ， 下 一 步 是 实现 调用 控制 器 方法 的 AngularJS 视 图 ， 最 后 使 用 AngularJS 
的 路 由 机 制 连接 控制 需 和 视 网 。 























8.4.3 ”实现 模块 视图 

CRUD 模 块 的 下 一 个 组 件 是 模块 的 视图 。 各 个 视图 提供 了 让 用 户 执行 上 一 节 中 所 创建 的 控制 
器 方法 的 界面 。 实 现 视图 的 第 一 步 ， 是 要 创建 视图 文件 夹 。 进 入 public/articles 文 件 夹 ， 创 建 名 为 
views 的 子 文件 来。 下 面 逐 个 创建 各 个 视图 。 





1. create-article 视 图 


create-article 视 图 提供 给 用 户 创 建 article 的 界面 。 视 图 中 包含 一 个 HTML 表 单 ， 它 使 用 
控制 器 中 的 create 方 法 保存 article。 进 入 public/articles/views 文 件 夹 ， 创 建 create-article.client. 
view.html 文 件 ， 并 为 其 输入 如 下 代码 : 








<section data-ng-controller="ArticlesController"> 
<hl>New Article</h1> 
<form data-ng-submit="create()" novalidate> 
<div> 

<label for="title">Title</label> 

<div> 
<input type="text" data-ng-model="title"id="title" 
placeholder="Title" required> 


<label for="content">Content</label> 
<div> 
<textarea data-ng-model="content"id="content" cols="30" rows="10" 


placeholder="Content"></textarea> 
</div> 


</div> 








<div> 
<input type="submit"> 
</div> 
<div data-ng-show="error"> 
<strong data-ng-bind="error"></strong> 
</div> 
</form> 
</section> 


create-article 视 图 中 有 一 个 简单 的 表单 ， 表 单 中 有 两 个 文本 框 和 一 个 提交 按钮 。 文 本 框 
中 使 用 ng-model 指 令 将 用 户 输 入 与 控制 右 scope 中 的 模型 数据 绑 定 ， 还 通过 ng-controller 指 
令 绑 定 了 articlescontroller 控 制 器 。 另 外 还 需要 注意 的 是 表单 元 素 中 使 用 了 ng-submit 指 
令 ， 该 指令 可 以 让 AngularJS 在 表单 提交 后 调用 指定 的 控制 需 方 法 ， 在 这 里 ， 表 单 提交 后 会 执行 
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create() 方 法 。 最 后 ， 当 发 生 错误 时 会 显示 在 表单 最 末 的 位 置 。 








2. view-article 视 图 


view-article 视 图 提供 给 用 户 查 看 单个 article 的 界面 。 视图 中 包含 一 些 HTML 元 素 , 它 使 用 
控制 器 中 的 finaone () 方 法 来 获取 单个 article。 当 article 的 创建 者 访问 这 个 视图 时 , 还 会 显示 删除 
和 导航 到 edqit-article 的 按钮 。 进 入 public/articles/views 文 件 夹 ,创建 view-article.client.view.html 
文件 ， 并 为 其 输入 以 下 代码 : 


<section data-ng-controller="ArticlesController" dqata-ng-init="findone ()"> 
<h1 data-ng-bind="article.title"></ Ph1> 














<div data-ng-show="authentication.user. id == article.creator. id"> 
<a href="/#!/articles/{{article._id}}/edit">edit</a> 
<a href="#" data-ng-click="delete();">delete</a> 

</div> 

<small> 


<em>Posted on</em> 
<em data-ng-bind="article.created | date:'mediumDate'"></em> 
<em>by</em> 
<em data-ng-bind="article.creator.fullName"></em> 
</small> 
<p data-ng-bind="article.content"></p> 
</section> 


view-article 视 图 包含 有 多 个 HTML 元 素 , 这 些 元 素 使 用 ng-bind 指 令 与 article 数 据 进 行 了 
绑 定 。 与 create-article 视 图 中 类 似 的 是 ， 这 里 也 使 用 ng-controller 来 设置 让 视图 使 用 
ArticlesController 控 制 器 。 由 于 在 打开 视图 的 同时 需要 加 载 article 信 息 ， 于 是 使 用 了 
ng-init 指 令 让 视图 打开 时 执行 控制 器 的 findone () 方 法 。 还 需要 注意 其 中 使 用 ng- show 来 控制 
只 有 当 访 问 者 是 article 创 建 者 时 显示 编辑 和 删除 链接 。 编辑 链接 可 以 跳 转 到 egdit-article 视 图 ， 
删除 链接 可 以 调用 控制 器 的 delete () 方 法 。 


3. edit-article 视 图 


edit-article 视 图 提供 给 用 户 修改 已 有 article 的 界面 。 视图 包含 一 个 HTML 表 单 , 它 使 用 控 
制 器 中 的 upaate () 方 法 保存 修改 的 文章 。 进 入 public/articles/views 文 件 夹 ， 创 建 edit-article.client. 
viewhtml 文 件 ， 并 为 其 输入 如 下 代码 : 


<section data-ng-controller="ArticlesController" data-ng-init="findone () "> 
<h1>Eqdit Article</hl> 
<form data-ng-submit="update()"novalidate> 
<div> 
<label for="title">Title</label> 
<div> 
<input type="text" data-ng-model="article.title" id="title" 
placeholder="Title" required> 
</div> 
</div> 
<div> 
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<label for="content">Content</label> 
LY 
<textarea data-ng-model="article.content"id="content" 
cols="30"rows="10" placeholder="Content"></textarea> 
/dLYVS 
</div> 
<div> 
<input type="submit" value="Update"> 
</div> 
<div data-ng-show="error"> 
<strong data-ng-bind="error"></strong> 
</div> 
</form> 
</section> 


edit-article 视 图 包含 一 个 简单 的 表单 ， 与 create-article 类 似 ， 表单 中 有 两 个 文本 框 
和 一 个 提交 按钮 。 文 本 框 使 用 ng-model 指 令 将 用 户 输入 与 控制 需 的 sscope.article 对 象 绑 定 。 
为 了 在 修改 之 前 就 能 够 对 文档 信息 进行 加 载 ， 视 图 通过 ng-init 在 打开 时 便 调 用 控制 器 的 
findqone () 方 法 。 另 外 还 要 注意 放 在 表单 元 素 中 的 ng-submit 指 令 。 该 指令 会 告诉 AngularJS 当 
表单 提交 时 执行 控制 器 的 update () 方 法 。 最 后 需要 注意 的 是 ， 当 修改 发 生 错 误 时 显示 在 表单 末 
尾 的 错误 信息 。 


















































4. 1ist-article 视 图 


list-article 视 图 提供 给 用 户 查看 已 有 article 列 表 的 界面 。 视 图 包含 几 个 HTML 元素, 它 使 
用 控制 器 的 Eina () 方 法 获取 现存 article 集 合 。 视 图 使 用 ng-repeat 指 令 填 充 出 一 个 HTML 列 表 ， 
每 一 条 便 是 一 个 article。 如 果 还 没有 任何 article, 视图 会 提供 一 个 导航 到 create-article 视 图 的 
链接 。 进入 public/articles/views 文 件 夹 , 创建 list-article.client.view.html 文 件 , 并 为 其 输入 如 下 代码 : 


























<section data-ng-controller="ArticlesController" data-ng-init="find()"> 
<hl>Articles</h1> 
<ul> 
<li data-ng-repeat="article in articles"> 
<a data-ng-href="#!/articles/{{article._ id}}" data-ng- 
bind="article. title"></a> 
过 直下 六 
<small data-ng-bind="article.created | date:'medium'"></small> 
<small>/</small> 
<small data-ng-bind="article.creator.fullName"></small> 
<p data-ng-bind="article.content"></p> 


<ALLS 
</ul> 
<div data-ng-hide="!articles || articles.length"> 
No articles yet, why don't you <a href="/#!/articles/create">create one</a>? 
</div> 


</section> 
list-article 视 图 通过 重复 几 个 HTML 元 素来 呈现 出 article 列 表 。 通 过 ng-repeat 指 令 对 
articles 命 令 中 的 文章 进行 遍历 ， 将 每 个 article 信 息 利 用 ng-bindq 绑 定 到 列表 元 素 上 。 与 其 他 几 个 
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视图 一 样 ， 这 里 是 通过 ng-controller 指 令 来 连接 视图 与 ArticlesController 控 制 器 。 为 了 
能 够 在 列表 打开 时 加 载 articles 列 表 ， 视 图 中 使 用 了 ng-init 指 令 调用 控制 器 的 fina () 方 法 。 另 
外 值得 注意 的 是 ， 当 articles 列 表 为 空 时 ， 由 ng-hige 指 令 控 制 , 询问 用 户 是 否 需 要 创建 新 文档 的 
内 容 便 会 显示 出 来 。 


AngularJS 视 图 实现 后 ， 只 差 模块 路 由 ， 整 个 增删 改 查 模块 就 完成 了 。 


























8.4.4 编写 AngularJS 路 由 


这 是 实现 CRUD 模 块 最 后 一 步 , 即将 视图 与 AngularJS 应 用 路 由 机 制 连接 起 来 。 这 意味 着 需要 
为 每 个 新 创建 的 视图 指定 路 由 。 进 入 publicarticles 文 件 夹 ， 创 建 名 为 config 的 文件 夹 ， 进 入 新 创 
建 的 子 文件 夹 ， 创 建 articles.clientroutes.js 文 件 ， 并 为 其 输入 如 下 代码 ; 



































angular.module('articles') .config(['S$routeProvider', 
function($routeProvider) { 
$srouteProvider. 
when('/articles', { 
templateUrl: 'articles/views/list-articles.client.view.html' 
了 站 
when('/articles/create', { 
templateUrl: 'articles/views/create-article.client.view.html' 


六 
when('/articles/:articleId', { 
templateUrl: 'articles/views/view-article.client.view.html' 
和 二 
when('/articles/:articleId/edit', { 
templateUrl: 'articles/views/edit-article.client.view.html' 
和 学 

} 

把 


上 述 代 码 为 每 个 视图 都 分 配 了 各 自 的 路 由 。 最 后 的 两 个 路 由 , 都 是 处 理 现存 article 的 , 在 URL 
定义 中 包含 了 名 为 articlieId 的 路 由 参数 。 控 制 器 会 利用 SrouteProvider 服 务 提取 
articleId 参 数 。 路 由 定义 完成 后 ， 最 后 一 步 是 配置 CRUD 模 块 ， 主 要 是 在 主 应 用 页 面 中 包含 模 
块 文件 ， 并 为 用 户 提 供 一 些 连接 到 CRUD 模 块 的 链接 。 





























为 了 完成 模块 的 实现 ， 还 需要 在 应 用 主页 面 中 包含 模块 的 JavaScript 文 件 ， 并 在 前 面 的 示例 
应 用 中 添加 一 些 连接 到 新 模块 的 链接 。 首 先 ， 修 改 应 用 的 主页 面 。 修 改 public/Views/index.ejs 文 
件 如 下 : 


<!DOCTYPE html> 
<html xmlns:ng="http://angularjs.org"> 
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<head> 

<title><%= title %$></title> 
</head> 
<body> 

<section ng-view></section> 


<script type="text/javascript"> 
window.user = <%- user || 'null' %>; 
</script> 


<script type="text/javascript" src="/lib/angular/angular.js"></script> 

<script type="text/javascript" src="/lib/angular-route/angularroute.js"></script> 

<script type="text/javascript" src="/lib/angular-resource/angular 
resource.js"></script> 


<script type="text/javascript" src="/articles/articles.client. 
module.js"></script> 

<script type="text/javascript" src="/articles/controllers/articles.client. 
controller.js"></script> 

<script type="text/javascript" src="/articles/services/articles.client. 
service.js"></script> 

<script type="text/javascript" src="/articles/config/articles.client.routes. 
js"></script> 


<script type="text/javascript 
</script> 
<script type="text/javascript 
controller.js"></script> 
<script type="text/javascript 
</script> 


src="/example/example.client.module.js"> 


src="/example/controllers/example.client. 


src="/example/config/example.client.routes.js"> 


<script type="text/javascript" src="/users/users.client.module.js"></script> 


src="/users/services/authentication.client. 














<script type="text/javascript 
service.js"></script> 


<!--Bootstrap AngularJS Application--> 

<script type="text/javascript" src="/application.js"></script> 
</body> 
</html> 


上 述 修改 中 ， 把 原本 主页 中 的 身份 验证 链接 去 掉 了 。 不 过 别 担心 ， 我 们 将 会 在 example 模 块 
的 home 视 图 中 加 上 它 。 修 改 public/example/views/example.client.view.html 如 下 : 

















<section ng-controller="ExampleController"> 
<div data-ng-show="!authentication.user"> 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 
</div> 
<div data-ng-show="authentication.user"> 
<hil>Hello <span data-ng-bind="authentication.user.fullName"></ 
span></h1> 
<a href="/signout">Signout</a> 
<ul> 
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<li><a href="/#!/articles">List Articles</a></l1i> 
<li><a href="/#!/articles/create">Create Article</a></1i> 
</ul> 
</div> 
</section> 


上 述 代 码 中 ， 当 用 户 还 没有 完成 身份 验证 时 便 会 显示 登录 和 注册 的 链接 。 当 用 户 登 录 后 ， 
则 显示 articles 模 块 的 链接 。 为 了 达到 这 个 效果 ， 还 需要 对 Examplecontroller 稍 作 修改 。 打 
开 public/example/controllers/example.client.controller.js 文 件 ,修改 Authentication 服 务 的 使 用 
方法 如 下 : 
angular.module('example') .controller('ExampleController', ['$scope', 'Authentication', 
function($scope, Authentication) { 
$scope.authentication = Authentication; 
3} 
J 
这 样 ，example 的 视图 便 可 完整 地 使 用 Authentication 服 务 。 大 功 告 成 ', CRUD 模 块 便 全 部 
完成 ， 接 下 来 可 以 对 其 进行 测试 了 。 使 用 命令 行 工具 进入 MEAN 应 用 的 根 目录 ， 执 行 如 下 命令 ， 











$node server 


程序 运行 后 ， 使 用 浏览 器 进入 http://localhost:3000/#l/， 便 可 以 看 到 登录 和 注册 的 链接 。 点 击 
链接 进行 登录 ， 再 看 看 页 面 有 什么 变化 。 然 后 进入 http://localhost:3000/#l/articles ， 可 以 看 到 
list-articles 视 图 显示 创建 article 的 链接 。 创 建 一 个 新 的 article， 再 使 用 前 面 创 建 的 视图 对 其 
进行 修改 和 删除 。CRUD 模 块 是 可 以 完整 执行 这 些 操 作 的 。 



































8.6 总结 


本 章 讲 述 了 如 何 创建 增删 改 查 模块 。 首 先 从 定义 Mongoose 和 Express 控 制 器 开始 ， 介 绍 了 如 
何 实现 增删 改 查 方法 。 接着 介绍 了 如 何 使 用 Express 中 间 件 执行 控制 器 方法 的 身份 验证 , 以 及 如 何 
为 模块 方法 定义 REST 风 格 的 API。 本 章 还 首次 接触 了 ngResource 模 块 ， 并 尝试 用 它 的 
sresource 工 厂 方法 与 后 端 API 进 行 通信 。 之 后 创建 了 AngularJS 实 体 ， 实 现 了 AngularJS 中 的 增 
删改 查 功 能 。 通 过 创建 一 个 增删 改 查 模块 ,我 们 将 整个 MEAN 应 用 的 四 大 部 分 都 串联 起 来 。 下 一 
章 将 使 用 Socket.io 在 服务 器 和 客户 端 应 用 之 间 建 立 实时 连接 。 
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在 前 面 的 内 容 中 ， 讲 述 了 如 何 创 建 MEAN 应 用 和 CURD 模 块 。 这 些 内 容 已 经 涵盖 了 一 个 Web 





应 用 的 基本 功能 。 但 现在 越 来 越 多 的 应 用 需要 实现 浏览 器 和 服务 器 之 间 的 实时 通信 。 本 章 将 讲述 


如 何 使 用 Socket'io 模 块 在 Express 应 用 与 AngularJS 应 用 之 间 建 立 实 时 连接 。Socketio 使 Node.js 开 发 


人 员 可 以 通过 使 用 WebSockets 协 议 , 并 以 一 些 老 的 协议 作为 后 备 选项 ， 





本 较 旧 的 浏览 需 中 实现 实时 连接 。 本 章 内 容 主要 有 : 


口 安装 Socket.io 模 块 

口 配置 Express 应 用 

口 配置 Socket.io 的 Passport 会 话 
口 创建 Socket.io 的 路 由 

口 使 用 Socket.io 的 客户 端 对 象 
口 实现 一 个 简单 的 聊天 室 








9.1 WebSockets 简介 


分 别 在 时 新 的 浏览 顺和 版 


像 Facebook 、Twitter 和 Gmail 之 类 的 现代 Web 应 用 都 有 一 些 实时 通信 的 需求 , 这 些 应 用 都 需要 
与 传统 Web 应 用 不 同 的 是 ， 实 时 Web 应 用 的 基本 要 求 是 
服务 器 和 浏览 器 之 间 可 以 反 向 数据 发 送 , 要 实现 这 个 目的 ,就 要 求 服务 需 向 浏览 器 发 送 新 数据 时 ， 

根本 不 用 考虑 浏览 是 否 发 起 了 请 求 。 区 别 于 HTTP 的 常规 特性 ， 服 务 器 不 需要 等 待 浏览 右 发 起 


连续 不 断 地 把 最 新 消息 呈现 在 用 户 面前 。 





请 求 ， 只 要 有 可 用 的 新 数据 ， 它 将 随时 
这 种 全 新 的 做 法 ， 被 称 之 为 Comet。 


























巴 这 些 数据 发 往 浏 览 句 端 。 
该 术语 是 Web 程 序 员 Alex Russel 在 2006 年 提出 的 ， 








Ajax 相关 的 一 个 术语 〈Comet 又 称 为 反 回 





去 兽 有 很 多 基于 HTTP 协 议 来 实现 的 Com 




















最 早 也 是 最 简单 的 办 法 是 XHR 轮 询 。 


服务 器 如 果 有 新 的 数据 就 将 新 数据 返回 ， 








et 技术 。 


在 XHR 轮 询 中 ， 浏 览 器 周期 性 地 向 服务 器 发 起 请 

















是 与 


句 Ajax， 美国 有 两 个 知名 的 洗衣 品牌 叫 Ajax 和 Comet )。 过 


求 
个 \， 


没有 则 返回 内 容 为 空 。 当 新 事件 发 生 时 ,服务 右 会 在 下 
一 个 轮 询 请 求 中 返回 对 应 的 事件 数据 。 虽 然 对 于 大 多 数 浏览 器 来 讲 这 已 经 够 用 了 , 但 XHR 轮 询 还 
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存在 两 大 问题 。 最 明显 的 一 个 问题 是 XHR 轮 询 会 无 缘 无 故 产生 大 量 的 服务 器 请 求 , 而 且 绝 大 多 数 
都 返回 并 无 实用 数据 的 响应 。 第 二 个 问题 是 浏览 器 获得 新 数据 的 速度 取决 于 轮 询 的 周期 。 浏 览 器 
只 有 在 下 一 次 请 求 的 时 候 才能 获得 新 的 数据 , 这 也 导致 了 客户 端 状态 的 延迟 。 为 了 解决 这 个 问题 ， 
一 个 相对 较 好 的 解决 方法 一 一 XHR 长 轮 询 ， 应 运 而 生 。 


通过 XHR 长 轮 询 技术 ， 浏 览 器 在 向 服务 器 发 起 XHR 请 求 时 ， 请 求 响应 并 不 是 马上 返回 ， 而 
是 等 到 服务 器 有 新 的 数据 后 再 返回 。 事 件 发 生 时 ， 服 务 器 将 新 事件 的 数据 作为 响应 予以 返回 。 一 
且 浏 览 器 收 到 响应 ， 便 会 发 起 一 个 新 的 长 轮 询 。 这 一 周期 使 得 我 们 可 以 对 请 求 进行 更 好 的 管理 ， 
每 个 会 话 也 只 需要 一 个 请 求 ,而 且 当 有 新 的 信息 时 ,服务 器 不 用 等 到 下 次 请 求 , 便 可 立即 将 数据 
作为 响应 返回 给 浏览 器 。 正 是 因为 它 的 可 用 性 和 稳定 性 ， 长 轮 询 逐 渐 成 为 实时 应 用 的 标准 方法 。 
长 轮 询 有 很 多 不 同 的 实现 方法 , 包括 持久 iFrame, 多 部 分 XHR, 通过 script 标 签 实现 的 支持 实时 和 
跨 域 JSONP 长 轮 询 ， 以 及 普通 的 XHR 长 连接 。 


但 是 ， 这 些 方 法 实际 都 只 是 HTTP 和 XHR 协 议 的 巧妙 应 用 而 已 ， 这 些 技巧 也 并 不 是 这 两 个 协 
议 设 计 的 初衷 。 随 着 现代 浏览 器 的 迅速 迭代 ， 以 及 对 HTML5 标 准 的 适应 ， 一 个 新 的 实时 通信 人 协 
议 ， 全 双 工 的 WebSockets 出 现 了 。 


在 支持 WebSockets 协 议 的 浏览 器 中 ， 浏览 器 与 服务 器 的 初始 化 连接 是 通过 HTTP 完 成 的 ， 被 
称 之 为 HTTP 握 手 。 初 始 化 完成 后 ， 浏 览 器 和 服务 器 之 间 便 建立 了 一 个 基于 TCP Socket 的 单个 持 
久 连 接 信道 。socket 连 接 一 旦 建立 ， 服 务 器 和 浏览 器 之 间 便 可 以 进行 双向 通信 。 这 意味 着 双方 都 
可 以 通过 该 单个 通信 信道 来 发 送 和 获取 消息 。 这 不 仅 可 以 降低 服务 器 负载 , 减少 消息 延迟 , 还 可 
以 通过 独立 的 连接 进行 统一 的 PUSH 通信 。 

不 过 WebSockets 仍 然 受制 于 两 个 问题 。 首 先 也 是 最 重要 的 便 是 浏览 器 的 兼容 性 问题 。 
WebSockets 还 是 一 个 新 标准 ， 因 此 一 些 版 本 较 旧 的 浏览 器 并 不 支持 。 虽然 很 多 新 的 浏览 器 已 经 实 
现 了 对 该 协议 的 支持 ,但 大 量 的 用 户 还 用 着 版 本 较 旧 的 浏览 器 。 第 二 个 问题 来 自 于 HTTP 代 理 、 
防火 墙 、 主 机 提供 商 等 。 由 于 WebSockets 是 与 HTTP 完 全 不 一 样 的 通信 协议 ， 上 述 几 个 中 介 并 不 
一 定 都 支持 它 , 甚至 还 有 可 能 屏蔽 sockets 通 信 。 这些 问题 从 Web 诞 生 之 初 就 一 直 困 扰 着 开发 人 员 ， 
唯一 能 解决 的 办 法 , 就 是 能 够 有 一 个 根据 不 同 的 环境 和 条 件 在 不 同 的 协议 之 间 进 行 自由 切换 , 并 
能 够 优化 可 用 度 的 抽象 库 。 好 在 Socket.io 出 现 了 ， 它 就 是 为 此 而 生 ，Node.js 程 序 员 们 可 以 对 其 进 
行 免 费 和 自由 的 使 用 。 









































































































































































































































9.2 ”Socket.io 简介 


2010 年 ，JavaScript 工 程 师 Guillermo Rauch 开 发 出 了 Socket.io， 帮 助 Node.js 程 序 员 们 对 实时 应 
用 通信 进行 了 抽象 。Socket.io 一 问世 便 备 受 瞩目 ， 它 先后 经 历 了 九 个 大 的 版 本 ， 后 来 义 被 拆 分 成 
两 个 大 的 模块 ， 即 Engine.io 和 Socket.io。 
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早期 版 本 的 Socket.io 予 人 口 实 之 处 在 于 其 不 稳定 性 。 这 些 版 本 一 开始 便 试 着 建立 一 种 高 级 的 
连接 机 制 ， 进 而 又 转向 了 传统 协议 。 这 严重 阻碍 了 Socket.io 在 生产 环境 中 的 部 署 ， 也 威胁 了 
Socket.io 作 为 一 个 实时 通信 类 库 的 存在 。 为 此 ，Socket.io 团 队 对 核心 功能 进行 了 重 构 ， 并 将 其 旭 
为 了 一 个 新 模块 一 一 Engine.io。 


Engine.io 致 力 于 创建 一 个 更 加 稳定 的 实时 通信 模块 , 一 开始 采用 的 是 XHR 长 轮 询 , 后 来 转 而 
升级 到 WebSockets 信 道 连接 。 新 版 的 Socket.io 在 Engine.io 的 基础 上 , 为 开发 人 员 提 供 了 诸如 事件 、 
房间 和 自动 重 连 等 特性 ， 免 去 了 对 这 些 特性 一 一 实现 的 烦恼 。 本 章 中 的 例子 将 采用 Socket.io 1.0 
版 ， 这 也 是 首 个 使 用 Engine.io 的 版 本 。 



























































Socket.io 1.0 之 前 的 版 本 ， 并 没有 使 用 新 的 Engine.io 模 块 。 这 些 版 本 在 生产 
~ 环境 中 存在 着 稳定 性 问题 。 


在 包含 Socketio 模 块 后 ， 该 模块 将 为 你 提供 一 个 用 于 服务 器 端 功 能 的 服务 器 socket 对 象 和 一 
个 处 理 浏览 右 端 功能 的 客户 端 socket 对 象 。 本 曹 示例 将 先 从 服务 器 对 象 开始 介绍 。 





9.2.1 Socket.io 服 务 器 端 对 象 


一 切 都 是 从 Socket.io 服 务 器 端 对 象 开 始 的。 首先 ， 需 要 对 Socket.io 模 块 进行 包含 ， 然 后 再 用 
它 来 创建 一 个 用 于 和 sockets 窜 户 端 交互 的 Socket.io 服 务 嚣 实例。 服务器 端 对 象 既 可 以 作为 一 个 独 
立 的 服务 器 来 实现 ,也 可 以 与 Express 框 架 结 合 。 服 务 器 端 实例 提供 了 大 量 用 于 管理 服务 器 的 方法 。 
服务 器 对 象 初始 化 后 ， 还 会 负责 为 浏览 器 提供 socket 客 户 端 的 JavaScript 文 件 。 


下 面 是 一 个 简单 的 Socket.io 独 立 服务 器 的 实现 : 














Var io = require('socket.io')(); 

io.on('connection', function(socket){ /* ... */ }); 

io.listen(3000); 

上 述 代 码 在 3000 端 口上 开启 了 Socket.io 服 务 ， 并 在 http://localhost:3000/socket.io/socket.io.js 
提供 了 socket 客 户 端 JavaScript 文 件 。 实 现 一 个 Socket.io 与 Express 结 合 的 应 用 , 则 与 上 面 略 有 不 同 : 


Var app = require('express')(); 
var server = require('http').Server(app); 
Var io = require('socket.io') (server); 


io.on('connection', function(socket){ /* ... */ }); 
server.listen(3000); 


这 里 是 首次 通过 使 用 Node.js 的 http 模 块 来 封装 Express 应 用 。 服 务 器 对 象 传人 了 Socket.io 模 
块 ， 同 时 为 Express 应 用 和 Socket.io 服 务 器 提供 服务 。 服 务 髓 启动 后 ，socket 客 户 端 便 可 以 进行 连 
接 。 客 户 端 要 与 Socketio 服 务 需 建立 连接 ， 首 先 便 要 从 初始 化 握手 进程 开始 。 
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1. 握手 


当 客 户 端 要 连接 Socketio 服 务 需 时 ， 首 先 需要 发 送 一 个 握手 HTTP 请 求 。 服 务 需 会 分 析 请 求 ， 
并 收集 建立 连接 所 需 信 息 。 接 下 来 便 是 查询 中 间 件 配置 , 看 是 否 有 注册 到 服务 器 且 需 要 在 建立 连 
接 之 前 执行 的 中 间 件 。 客 户 端 连接 到 服务 器 后 ， 连 接 的 事件 监听 器 便 会 开始 监听 , 创建 一 个 新 的 
socket 实 例 。 


握手 完成 后 ,客户 端 连接 到 服务 器 ，socket 实 例 对 象 则 会 处 理 与 连接 相关 的 所 有 内 容 。 比 如 ， 
下 面 便 是 用 它 来 处 理 客户 端的 断 开 事 件 : 















































Var app = require('express') (); 

Var server = require('http').Server(app); 

Var io = require('socket.io') (server);} 

io.on('connection', function(socket)t{ 
socket.on('disconnect', function() { 

console.log('user has disconnected'); 

}); 

}); 

server.listen(3000); 


其 中 ，socket .on () 方 法 为 连接 断 开 事件 添加 了 一 个 事件 处 理 程序 。 连 接 断 开 事件 是 一 个 
预定 义 事 件 ， 自 定义 事件 也 采用 了 同样 的 方法 ， 对 此 后 面 的 小 节 中 还 会 涉及 。 


握手 机 制 虽然 是 自动 的 ，Socket'io 仍 通过 配置 中 间 件 的 方式 为 开发 人 员 提供 了 拦截 握手 过 程 
的 方法 。 

2. 中 间 件 配置 
虽然 老 版 本 的 Socket.io 早 已 支持 配置 中 间 件 , 但 新 版 本 中 该 配置 不 仅 更 为 简便 ， 而 且 还 支持 


在 握手 之 前 就 对 socket 通 信 进 行 操作 。 使 用 服务 器 端的 use () 方 法 即 可 创建 配置 中 间 件 ， 它 与 
Express 应 用 中 的 use () 方 法 非常 相似 ， 如 下 : 




































































Var app = require('express') (); 
Var server = require('http').Server(app); 
Var io = require('socket.io') (server); 


io.use(function(socket, next) { 
A a 
next (null, true); 

}); 


io.on('connection', function(socket)t{ 
socket.on('disconnect', function() { 
console.log('user has disconnected'); 
2 
于 站 地 


server.listen(3000); 
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上 述 代码 中 ，io.use() 方 法 的 回调 函数 有 两 个 参数 : 一 个 socket 对 象 ， 一 个 next 回 调 函 
数 。socket 对 象 和 上 文中 的 socket 对 象 相同 ， 用 于 创建 连接 ， 并 保存 着 一 些 连 接 属 性 。 其 中 ， 
socket .request 属 性 颇 为 重要 ， 用 以 代 指 HTTP 握 手 请 求 。 在 后 面 的 小 节 中 ， 它 将 用 于 在 握手 
请 求 中 将 Passport 的 会 话 信 息 包含 到 Socket.io 连 接 内 。 


作为 回调 函数 ，next 接 收 两 个 参数 ， 一 个 错误 对 象 和 一 个 布尔 值 。 回 调 函 数 next 用 于 告诉 
Socket.io 是 否 处 理 握手 过 程 ， 因 此 如 果 对 next 方 法 传人 一 个 错误 对 象 ， 或 将 布尔 值 置 为 false， 
Socket.io 便 不 会 处 理 初始 化 socket 连 接 。 下 面 我 们 来 好 好 理解 一 下 握手 到 底 是 如 何 进行 的 。 首 先 
请 看 Socket.io 客 户 端 对 象 。 












































9.2.2 ”Socket.io 客 户 端 对 象 


Socket.io 客 户 端 对 象 负责 浏览 器 与 Socket.io 服 务 器 间 的 socket 通 信 。 首先 需 要 包含 由 Socket.io 
服务 器 提供 的 Socket.io 客 户 端 JavaScript 文 件 。 该 文件 提供 了 io() 方 法 ,可 用 于 连接 Socket.io 服 务 
右 并 创建 客户 端 socket 对 象 ， 下 面 是 一 个 简单 的 socket 客 户 端的 实现 : 


























<script src="/socket.io/socket.io.js"></script> 


<script> 
Var socket = io(); 
socket.on('connect', function() { 
da ro th 
} 
</script> 
上 述 代码 中 , 需要 注意 的 是 Socket.io 客 户 端 对 象 JavaScript 文 件 的 默认 URL。 这 个 值 是 可 以 修 
改 的 ， 也 可 以 如 示例 那样 留 空 ， 从 默认 的 Socket.io 路 径 中 包含 Socket.io 客 户 端 JavaScript 文 件 。 男 
个 需要 注意 的 是 ， 当 使 用 空 参数 执行 io () 方 法 时 ， 该 方法 会 自动 连接 到 默认 的 基础 路 径 。 当 
然 ， 也 可 以 通过 传人 一 个 服务 器 URL 作 为 参数 。 


综 上 所 述 ，socket 客 户 端的 实现 的 确 很 简便 。 接 下 来 的 内 容 将 讨论 Socket.io 是 如 何 通过 运用 
时 间 来 处 理 实时 通信 的 。 



























































9.2.3 ”Socket.io 的 事件 


为 了 处 理 客户 端 和 服务 器 之 间 的 通信 , Soket.io 用 一 个 模拟 Websockets 协 议 的 结构 来 处 理 服 务 
需 与 客户 端 对 象 之 间 的 事件 消息 。 主 要 的 事件 类 型 有 两 种 ， 一 种 是 表示 socket 连 接 状 态 的 系统 事 
件 ， 另 一 种 是 用 于 实现 业务 逻辑 的 自 定 义 事件 。 


socket 服 务 右 的 系统 事件 如 下 。 


口 io.on('connection'，...): 有 新 socket 连 接 建立 时 触发。 
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客户 端的 系统 事件 如 下 。 


口 socket .on('message'，...): 当 使 用 socket .send() 方 法 发 送 完 消息 后 触发 。 
口 socket .on('disconnect'，...): 当 连 接 断 开 时 触发 。 
































口 socket .io.on('open'，...): 当 socket 客 户 端 开 启 一 个 与 服务 器 的 新 连接 时 触发 。 

口 socket .io.on('connect'，...): 当 socket 客 户 端 连 接 到 服务 器 后 触发 。 

口 socket .io.on('connect_timeout'，...): 当 socket 客 户 端 与 服务 需 之 间 的 连接 超 
时 后 触发 。 

口 socket .io.on('connect_error'，...): 当 socket 客 户 端 连接 服务 古 失 败 时 触发 。 

口 socket .io.on('reconnect_attempt'，...): 当 socket 客 户 端 尝试 重新 连接 到 服务 
圳 时 触发 。 

口 socket .io.on('reconnect'，...): 当 socket 客 户 端 重新 连接 到 服务 器 后 触发 。 

口 socket .io.on('reconnect_error'，...): 当 socket 客 户 端 与 服务 器 重 连 失败 后 触发 。 

口 socket .io.on('reconnect_failed'，...): 当 socket 客 户 端 与 服务 器 重 连 失败 后 触发 。 

口 socket .io.on('close'，...): 当 socket 客 户 端 关闭 与 服务 需 的 连接 后 触发 。 

1. 事件 处 理 











系统 事件 用 于 连接 管理 , 不 过 Socket.io 真 正 的 魔力 在 于 自 定义 事件 。 为 了 实现 事件 的 自 定义 ， 
Socket'io 针 对 客户 端 对 象 和 服务 器 端 对 象 提 供 了 两 个 方法 。 一 个 是 用 于 绑 定 事件 和 事件 处 理 程序 




















的 on () 方 法 ， 另 一 个 是 用 于 在 服务 器 和 客户 端 触 发 事件 的 emit ( ) 方 法 。 


在 socket 服 务 器 上 使 用 on () 方 法 的 示例 如 下 : 


Var app = require('express') (); 
Var server = require('http').Server(app); 
Var io = require('socket.io') (server); 


io.on('connection', function(socket)t{ 
Socket .on('customEvent', function(customEventData) { 
hh 
}); 
站 站 


server.listen(3000); 





上 述 代 码 向 服务 器 的 监听 器 上 绑 定 了 customEvent 事 件 。 当 socket 客 户 端 对 象 触发 了 














customEvent 事件 后 ,该 事件 处 理 程 序 便 会 执行 。 注 意 ， 这 里 
customEventData 参 数 ， 是 由 socket 客 户 端 对 象 传 过 来 的 。 




















<script src="/socket.io/socket.io.js"></script> 


<script> 
Var socket = io(); 
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Socket .on('customEvent', function(customEventData) { 
HE 
}); 
</script> 


而 在 这 段 代 码 中 ， 当 socket 服 务 器 触发 customEvent 
会 执行 ， 并 接收 到 服务 器 端 传 来 的 customEventData。 


hl 














事件 后 ，socket 客 户 端 事件 处 理 程 序 便 


事件 处 理 程序 设置 好 后 ， 便 可 以 用 emit () 方 法 在 socket 服 务 器 和 socket 客 户 端 之 间 双 向 发 送 











事件 。 
2. 事件 触发 
































socket 服 务 嚣 中 ，emit () 方 法 是 用 于 向 连接 着 的 单个 或 者 一 组 socket 客 户 端 发 送 事 件 。 通 过 
socket 对 象 即 可 调用 emit () 方 法 ， 下面 的 代码 可 以 向 单个 socket 客 户 端 发 送 事 件 : 


io.on('connection', function(socket)t{ 
socket .emit ('customEvent', customEventData); 
二 


如 下 : 


io.on('connection', function(socket)t{ 
io.emit('customEvent', customEventData); 
上 让 


此 外 ， 还 可 以 通过 使 用 broadcast 
件 ， 如 下 所 示 : 
io.on('connection', function(socket)t{ 


socket .broadcast .emit ('customEvent', customEventData); 
上 





| 
上 








便 只 能 向 socket 服 务 器 发 送 事件 ， 如 下 : 


Var socket = io(); 
socket .emit('customEvent', customEventData); 


上 述 方法 可 以 让 开发 人 员 在 单独 或 者 全 局 事件 间 做 自主 切换 ， 








户 端 群 组 发 送 事 件 。 为 将 多 个 socket 客 户 端 组 合 起 来 ，Socket.io 提 供 


和 房间 。 
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当然 ， 也 可 以 通过 io 对 象 调用 emit () 方 法 ,这样 便 可 以 向 所 有 连接 着 的 客户 端 发 送 事件 ， 


遇 性 给 除 当 前 连接 外 的 所 有 连接 的 socket 客 户 端 发 送 事 


在 客户 端 触 发 事件 就 比较 简单 了 , 由 于 socket 客 户 端 只 连接 了 一 个 socket 服 务 器 , 因此 emit () 





日 这 些 方法 都 无 法 向 socket 客 
了 以 下 两 个 方法 : 命名 空间 
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9.2.4 Socket.io 命 名 空间 


为 了 便于 对 socket 进 行 管理 ，Socketio 提 供 了 根据 目的 对 socket 连 接 进 行 划 分 的 命名 空间 。 因 
此 要 对 不 同 的 连接 点 进行 不 同 管理 ， 并 不 需要 创建 多 个 socket 服 务 右 实例 ， 只 需要 一 个 服务 器 实 
例 即 可 。 通 过 命名 空间 便 可 对 socket 通 信 分 组 ， 并 逐一 处 理 。 


1. 服务 器 端 命名 空间 


通过 socket 服 务 器 的 of () 方 法 ， 便 可 创建 一 个 socket 命 名 空间 。 一 旦 有 了 命名 空间 ， 便 可 以 
像 使 用 socket 服 务 器 对 象 一 样 使 用 它 。 


Var app = require('express') (); 
Var server = require('http').Server(app); 
Var io = require('socket.io') (server); 





























io.of('/someNamespace').on('connection', function(socket)t 
socket.on('customEvent', function(customEventData) { 
J Sh 
让 
3 


io.of('/someOtherNamespace') .on('connection', function(socket)t{ 
socket .on('customEvent', function(customEventData) { 
/re 
让 
入 


server.listen(3000); 


当 客 户 端 直接 使 用 io 对 象 时 ， 实 际 使 用 的 便 是 空 命 名 空间 。 如 下 所 示 : 





io.on('connection', function(socket)t{ 
FE ee 

下 

上 述 代 码 等 价 于 : 


io.of('').on('connection', function(socket)t{ 
Ws 

1 

2. 客户 端 命名 空间 


在 socket 客 户 端 ， 命 名 空间 的 使 用 稍 有 不 同 : 





<script src="/socket.io/socket.io.js"></script> 


<script> 
Var someSocket = io('/someNamespace'); 
someSocket.on('customEvent', function(customEventData) { 
A Nk 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 





9.2 ”Socket.io 简介 175 





}); 


Var someOtherSocket = io('/someOtherNamespace'); 
someOtherSocket.on('customEvent', function(customEventData) { 
A Sh ey 
yo) 
</script> 


如 上 述 代 码 所 示 ， 多 个 命名 空间 可 以 被 轻松 地 放 在 同一 个 应 用 内 使 用 。 不 过 ， 一旦 socket 连 
接 到 了 不 同 的 命名 空间 ， 是 不 能 同时 向 多 个 命名 空间 发 送 事 件 的 。 这 就 意味 着 , 命名 空间 并 不 适 
合 动态 分 组 的 逻辑 ， 为 此 ，Socketio 提 供 了 房间 这 个 功能 。 

















9.2.5_Socket.io 的 房间 


通过 Socketio 的 房间 功能 ,， 便 可 以 动态 的 方式 对 已 连接 的 socket 进 行 分 组 。socket 连 接 可 以 加 
入 或 者 离开 房间 ， 除 此 之 外 ，Socket.io 还 提供 了 简洁 的 接口 来 管理 房间 ， 还 可 对 房间 中 的 一 部 分 
socket 连 接触 发 事件 。 房 间 功 能 单 由 socket 服 务 嚣 处理， 但 也 可 以 将 功能 通过 接口 提供 给 socket 客 
户 端 。 

1. 加 入 与 离开 


加 入 房间 由 socket 的 join () 方 法 处 理 ， 离 开房 间 由 socket 的 leave () 方 法 处 理 。 下 面 的 代码 
便 实现 了 一 个 简单 的 订阅 机 制 : 

















io.on('connection', function(socket) { 
socket.on('join', function(roomData) { 
Socket .join(roomData.roomName); 
} 
socket.on('leave', function(roomData) { 
Socket .leave (roomData.roomName); 
} 
} 


join () 方 法 和 1leave () 方 法 均 需 要 将 房间 名 字 作 为 参数 传人 。 
2. 房间 中 的 事件 触发 
若 要 对 房间 内 的 所 有 socket 触 发 事件 ， 使 用 in () 方 法 即 可 。 可 以 借助 下 面 的 代码 段 来 轻松 
完成 : 
io.on('connection', function(socket)t{ 
io.in('someRoom') .emit ('customEvent', customEventData); 


}); 


除 此 之 外 ， 还 可 以 向 除 某 个 socket 客 户 端 外 的 其 他 所 有 加 入 当前 房间 的 客户 端 发 送 事件 。 只 
需 使 用 被 排除 的 socket 的 broadqcast 属 性 以 及 to () 方 法 即 可 ， 如 下 所 示 : 
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io.on('connection', function(socket)t{ 
socket .broadcast .to('someRoom') .emit ('customEvent',customEventData); 


这 

以 上 涵盖 了 Socket.io 简 单 而 又 强大 的 功能 。 下 一 节 中 ， 将 学 习 如 何在 MEAN 应 用 中 实现 
Socket.io， 其 中 较为 重要 的 一 点 在 于 ， 如 何 利用 Passport 的 会 话 在 Socket.io 会 话 中 鉴别 用 户 。 本 章 
中 的 示例 程序 依然 是 基于 前 面 的 内 容 中 的 ， 因 此 ， 直 接 复制 第 9 章 中 示例 程序 代码 最 终 版 即 可 。 























上 述 内 容 已 经 介绍 了 Socket.io 的 大 部 分 功能 。 你 也 可 以 通过 访问 Socket.io 的 
> 官网 (http://socket.io ) 进一步 了 解 。 


9.3 ”Socket.io 的 安装 


在 使 用 Socket.io 模 块 之 前 ， 依 然 需要 通过 npm 进 行 安 装 。 修 改 package.json 的 内 容 如 下 : 





{ 

"name": "MEAN", 

versionmn™.: "00.9 

"dependencies": { 
"express": "~4.8.8", 
"moOrgants ol dD 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ejs": "~1.0.0", 
"connect-flash": ™~0.1.1", 
"mongoose": "~3.8.15", 
"DaSSDort", "~0w2,.1", 
"passport-local": "~1.0.0", 
"passport-facebook"; "~1.0.3", 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
"socket .io": "~1.1.0" 

} 

} 


在 命令 行 中 进入 应 用 的 根 目录 ， 执 行 下 面 的 命令 来 安装 Socket.io 模 块 : 

$ npm install 

这 便 可 以 将 指定 版 本 的 Socket.io 安 装 到 node_models 文 件 夹 中 。 安 装 执行 完成 后 ， 需 要 对 
Express 应 用 进行 配置 ， 使 其 能 与 Socket.io 结 合 在 一 起 ， 以 便 同 时 启动 Express 服 务 器 和 socket 服 
务 器 。 
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9.3.1 配置 Socket.io 的 服务 器 


Socket.io 模 块 安装 完成 后 ， 接 下 来 便 要 将 socket 服 务 器 与 Express 应 用 结合 在 一 起 。 先 修改 
config/express.js 文 件 如 下 : 


var config = require('./config'), 
http = require('http'), 
Socketio = require('socket.io'), 


express = require!('express'), 
morgan = require('morgan'), 
compress = require('compression'), 


bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'), 

flash = require('connect-flash'), 

passport = require('passport'); 


module.exports = function() { 
Var app = express(); 
Var server = http.createServer (app); 
Var io = socketio.listen(server); 


if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 
} else if (process.env.NODE_ENV === 'production') { 


app.use (compress ()); 


app.use (bodyParser.urlencoded(t{ 
extended: true 

js 光 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


app.use (session({ 
saveUninitialized: true， 
resave: true, 
secret: config.sessionSecret 


app.set('views', './app/views'); 
app.set('view engine', 'ejs'); 





app.use (flash()); 
app.use (passport.initialize()); 
app.use (passport.session()); 


require('../app/routes/index.server.routes.js') (app); 
require('../app/routes/users.server.routes.js') (app); 
require('../app/routes/articles.server.routes.js') (app); 


app.use (express.static('./public')); 
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return server; 
} 
让 我 们 逐一 看 看 上 面 对 Express 配 置 所 做 的 修改 。 首先 上述 修改 添加 了 新 的 依赖 ,接着 用 核 
心 模块 http 创 建 的 server 对 象 来 包装 Express 的 app 对 象 。 然 后 使 用 socket.io 模 块 的 listen() 方 
法 将 Socketio 服 务 器 附加 给 server 对 象 。 最 后 用 新 的 server 对 象 取代 了 以 前 返回 的 Experss 应 用 
对 象 。 当 服务 器 启动 时 ，Socket.io 服 务 器 便 会 同 Express 应 用 一 同 启动 。 


通过 上 述 操 作 ， 虽 然 已 经 可 以 直接 使 用 Socket.io， 但 这 样 就 要 面 对 一 个 问题 。 由 于 Socket.io 
是 一 个 独立 的 模块 ， 发 给 它 的 请 求 与 Express 应 用 没有 任何 关系 。 也 就 是 说 没 办 法 在 socket 连 接 中 
使 用 Express 会 话 。 这 便 产 生 了 一 个 严重 的 问题 , 无 法 在 应 用 的 socket 层 中 使 用 Passport 来 进行 身份 
验证 。 为 此 , 需要 配置 一 个 持久 的 会 话 存 储 , 以 便 在 Socket 的 握手 请 求 中 访问 Express 的 会 话 信 息 。 










































































9.3.2 ”配置 Socket.io 的 会 话 


要 配置 Socket.io 会 话 来 结合 Express 会 话 共 同 工 作 , 首先 需要 找到 在 Express 和 Socket.io 间 共享 
会 话 信 息 的 办 法 。 由 于 Express 会 话 信 息 现在 都 是 存储 在 内 存 中 , 所 以 Socket.io 无 法 对 其 进行 访问 。 
因此 ， 更 好 的 办 法 是 将 会 话 信 息 保 存在 MongoDB 中 。 好 在 已 经 有 一 个 名 为 connect-mongo 的 
Node 模 块 可 以 将 会 话 信 息 几乎 无 颖 地 存储 在 MongoDB 实 例 中 。 要 访问 Express 的 会 话 信息 ， 只 需 
要 解析 已 登录 会 话 数据 即 可 。 为 此 ,还 需要 安装 cookie-parset 模 块 ， 用 以 解析 cookie 头 ， 并 用 
cookie 相 关 的 属性 来 填充 HTTP 请 求 对 象 。 


















































1. 安装 connect -mongo 和 cookie-parser 模 块 











在 使 用 connect-mongo 和 cookie-parser 模 块 之 前 ， 需 要 先 通过 npm 进 行 安 装 ， 修 改 
package.json 如 下 : 











{ 

"name": "MEAN", 

"YEPSTONT se TO OO, 

"dependencies": { 
"express": "~4.8.8", 
"morganTs, Mol, a0" 
OoOmMDressLron Tl.sO0 Ll. 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"EJS TL O00 
"Connect-flash™: "~0.1.1"™, 
"moOnNgJooOSe"s "~»3,.8.15", 
"Dassport sy T0221, 
"asport LG. 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
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"SOGket.LO 3 voll a0", 
"connect-mongo": "~0.4.1", 
"Cookie-parser"™: "~1.3.3" 


} 
使 用 命令 行 工具 进入 应 用 的 根 目录 ， 执 行 如 下 的 命令 来 完成 安装 


$ npm install 


这 便 可 以 将 指定 版 本 的 connect-mongo 和 cookie-parser 模 块 安装 到 node models 文 件 夹 。 
安装 完成 后 ， 便 可 以 配置 Express 应 用 将 connect -mongo 作 为 会 话 存 储 使 用 。 











2. 配置 connect-mongo 


要 配置 Express 应 用 将 connect -mongo 模 块 作为 会 话 数据 存储 ， 需 要 做 几 方 面 的 修改 。 第 一 
步 ， 先 修改 config/express.js 如 下 : 





Var config = require('./config'), 
http = require('http'), 
socketio = require('socket.io'), 
express = require!('express'), 
morgan = requirel('morgan'), 
compress = require('compression'), 
bodyParser = require('body-parser'), 
methodOverride = require('method-override'), 
session = require('express-session'), 
MongoStore = require('connect-mongo') (session), 
flash = require('connect-flash'), 
passport = require('passport'); 


module.exports = function(db) { 
Var app = express(); 
Var server = http.createServer (app); 


Var io = socketio.listenl(server); 

if (process.env.NODE_ENV === 'development') { 
app.use (morgan('dev')); 

} else if (process.env.NODE_ENV === 'production') { 


app.use (compress ()); 





app.use (bodyParser.urlencoded(t{ 
extended: true 

})); 

app.use (bodyParser.json()); 

app.use (methodOverride()); 


Var mongoStore = new MongoStore ({ 


db: db.connection.db 
}); 


图 灵 社 区 会 员 打 顺 顺 (lvshun@live.cn) 专 享 尊重 版 权 


基于 Socket.io 的 实时 通 





app.use(session({ 
saveUninitialized: true, 
resave: true, 
Secret: config.sessionSecret, 
store: mongoStore 

})); 

)3 


app.set ('views', './app/views' 


app.set ('view engine', 'ejs'); 

app.use (flash()); 

app.use (passport.initialize()); 

app.use (passport.session()); 
require('../app/routes/index.server.routes.js') (app); 
require('../app/routes/users.server.routes.js') (app); 
require('../app/routes/articles.server.routes.js') (app); 


app.use (express.static('./public' 


)); 


return server; 


上 述 代码 完成 了 几 方 面 的 配置 。 首 先 加 载 了 conn 


会 


ect-mongo 模 块 ， 并 为 其 传人 了 Express 


话 模块 。 接 着 创建 了 connect -mongo 模 块 的 实例 ， 并 向 其 传人 了 Mongoose 的 连接 对 象 。 最 后 ， 


通过 Express 会 话 存储 选项 告诉 Express 会 话 模块 会 话 信 息 


上 述 代 码 中 ，Express 的 配置 方法 中 包含 了 一 个 
serverjs 文 件 中 引入 express.js 时 传人 给 Express 配 置 方法 





process.env .NODE_ENV process.env .NODE_ENV 


requirel('! 
requirel(' 


var mongoose 
express 
passport 


./config/mongoose' 
./config/express'), 
require('./config/passport' 


) ， 


)3 


var db mongoose (); 

Var app express (db); 
var passport passport () ; 
app.1isten(3000) ; 


module.exports 


app; 


console.log( 


一 旦 Mongoose 连 接 创 建 完成 ， 
Mongoose 数 据 库 连接 属 诉 
这 样 便 可 供 Socket.io 会 话 进行 访问 。 
过 cookie-parser 模 块 和 connect-mongo 模 块 获取 E 


serverjs 文 件 便 会 
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/ 己 


'Server running at http://localhost:3000/"' 
会 调 月 
E。 通过 这 种 方法 ,Express 将 会 话 信息 持久 化 存储 到 MongoDB 数 据 库 中 ， 

接 下 来 需要 对 Socket.io 的 握手 中 间 件 进行 配置 ， 使 其 可 以 通 





的 存储 位 置 。 


个 Mongoose 连 接 对 象 db 参 数 。 该 参数 是 在 
的 。 修 改 server.js 文 件 如 下 : 























'development'; 


了 
日 expressjs 的 模块 方法 ， 并 为 其 传人 














xpress 的 会 话 数据 。 
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3. 配置 Socket.io 的 会 话 


要 配置 Socketio 的 会 话 ， 需 要 用 到 Socketio 的 配置 中 间 件 来 检查 用 户 的 会 话 信息 。 在 config 
文件 夹 中 创建 一 个 名 为 socketio.js 的 文件 ， 用 于 存储 所 有 的 Socket.io 相 关 配 置 ， 文 件 内 容 如 下 : 








Var config = require('./config'), 
CookieParser = require('cookie-parser'), 
passport = require('passport'); 


module.exports = function(server, io, mongoStore) { 
io.use(function(socket, next) { 
CookieParser (config.sessionSecret) (socket.request, {}, function(err) { 
var sessionId = socket.request.signedCookies['connect.sid']; 


mongoStore.get (sessionId, function(err, session) { 
socket .request.session = session; 


passport.initialize() (socket.request, {}, function() { 
passport.session() (socket.request, {}, function() { 
if (socket.request.user) { 
next (null, true); 
} else { 
next (new Error('User is not authenticated'), false); 


io.on('connection', function(socket) { 
WR a Ry 











该 配置 文件 中 ， 首 先 添加 了 一 些 依赖 ， 接 着 使 用 配置 方法 io.use() 中断 了 握手 过 程 。 在 配 
置 函数 中 ,使 用 Express 的 cookie-parser 模 块 解析 握手 请 求 的 cookie， 并 获取 对 应 的 Express 中 
的 sessionId, 然后 用 connect-mongo 的 实例 从 MongoDB 存 储 中 检索 会 话 信 息 。 一旦 获取 到 会 
话 对 象 ， 便 使 用 passport. initialize() 和 passport.session() 中 间 件 根据 会 话 信息 来 填 
充 会 话 的 user 对 象 。 如 果 用 户 通过 了 身份 验证 ， 握 手中 间 件 便 会 执行 回调 函数 next () ， 继 续 执 
行 socket 的 初始 化 过 程 。 和 否则 该 握手 中 间 件 便 会 执行 next () 通知 Socket.io 不 要 打开 这 一 连接 。 换 
言 之 ， 只 有 通过 身份 验证 的 用 户 才 可 以 与 服务 器 的 socket 通 信 ， 以 防止 非法 用 户 与 Socket.io 服 务 
器 建立 连接 。 


Socket.io 服 务 器 的 配置 并 没有 完成 ， 还 需要 在 express.js 文 件 中 调用 Socketio 的 配置 模块 。 打 
开 express.js 文 件 ， 在 返回 server 对 象 之 前 ， 加 入 如 下 代码 : 












































require('./socketio') (server, io, mongoStore); 
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接 下 来 便 可 以 执行 Socket.io 的 配置 中 间 件 ， 并 完成 Socket.io 的 会 话 设置 了 。 这 样 ， 所 有 的 配 











置 便 都 完成 了 。 接 下 来 请 看 如 何 使 用 Socket.io 和 MEAN 来 创建 简单 的 聊天 室 。 


9.4 





使 用 Socket.io 创建 聊天 室 














下 面 通过 创建 一 个 简单 的 聊天 室 ， 来 学 习 Socket.io 实 时 通信 应 用 的 实现 。 聊 天 室 由 一 些 服 务 
器 端的 事件 处 理 程序 构成 ， 但 大 多 数 的 实现 是 在 AngularJS 应 用 中 完成 的 。 首 先 请 从 服务 器 端的 












































事件 处 理 程序 开始 。 
9.4.1 设置 聊天 服务 器 的 事件 处 理 程序 





在 AngularJS 应 用 中 实现 聊天 客户 端 之 前 ， 首 先 需要 创建 一 些 服务 器 端的 事件 处 理 程序 。 由 








于 程序 的 主要 框架 已 经 完成 , 因此 便 不 能 直接 把 事件 处 理 程序 写 在 配置 文件 中 , 聊天 逻辑 最 好 是 
在 单独 的 文件 中 实现 。 在 app/controllers/ 中 创建 名 为 chat.server.controller.js 的 新 文件 ， 用 于 存储 服 
务 器 端的 聊天 室 控制 器 ， 代 码 如 下 : 


module.exports = function(io, socket) { 


人 

















io.emit('chatMessage', { 
type: 'status', 
text: 'connected', 
created: Date.now(), 
username: socket.request .user.username 


3 


socket.on('chatMessage', function(message) { 


message.type = 'message'; 
message.created = Date.now(); 
message.username = Socket .redquest .user.username; 


io.emit ('chatMessage', message); 


3 


socket.on('disconnect', function() { 
io.emit ('chatMessage', { 
type: 'status', 
text: 'disconnected', 
created: Date.now(), 
username: socket.request.user.username 
Ds 

其) 学 











上 述 文 件 将 实现 如 下 几 个 操作 : 首先， 通过 io .emit () 方 法 向 所 有 已 连接 的 socket 客 户 端 发 
出 新 用 户 加 入 的 通知 。 该 操作 是 由 通过 触发 chatMessage 事 件 来 完成 的 ， 然 后 向 其 传人 了 一 个 名 
为 message 的 对 象 , 该 对 象 包 括 用 户 信息 、 消 息 体 (message.text )、 时 间 (message.created ) 
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和 类 型 ( message.type )。 在 socket 服 务 器 的 配置 中 ,已 经 实现 了 对 用 户 身份 的 验证 ， 因 此 通过 
SOCKet .fedquest .us r 即 可 获取 用 户 信息 。 


接 下 来 实现 chatMessage 事 件 处 理 程序 。 该 函数 负责 处 理由 socket 客 户 端 发 过 来 的 消息 。 事 
件 处 理 程序 收 到 客户 端 发 来 的 消息 后 , 会 添加 消息 类 型 、 用 户 信 息 , 然后 再 通过 io .emit () 方 法 
发 送 给 所 有 已 连接 到 服务 髓 的 socket 客 户 端 。 
最 后 一 个 实现 的 也 是 事件 处 理 程序 ， 该 程序 负责 处 理 系 统 事件 disconnect。 当 某 个 用 户 与 


服务 器 之 间 的 连接 断 开 后 ， 该 事件 处 理 程序 便 通 过 io .emit () 方 法 通知 所 有 已 连接 的 socket 客 户 
端 。 这 便 可 以 在 聊天 界面 中 显示 出 有 人 断 开 连接 的 信息 。 


服务 器 端的 处 理 程序 的 实现 便 完 成 了 ， 但 还 需要 将 其 加 入 socket 服 务 器 的 配置 文件 中 。 编 辑 
config/socketio.js 文 件 ， 修 改 如 下 : 






























































var config = require('./config'), 
CookieParser = require('cookie-parser'), 
passport = require('passport'); 


module.exports = function(server, io, mongoStore) { 
io.use(function(socket, next) { 
CookieParser (config.sessionSecret) (socket.request, {}, function(err) { 
Var sessionId = socket.request.signedCookies['connect.sid']; 


mongoStore.get (sessionId, function(err, session) { 
socket .request.session = session; 


passport.initialize() (socket.request, {}, function() { 
passport.session() (socket.request, {}, function() { 
if (socket.request.user) { 
next (null, true); 





} else { 
next (new Error('User is not authenticated'), false); 
} 
} 
下 
] ) 
} 
} 
io.on('connection', function(socket) { 9 
require('../app/controllers/chat.server.controller') (io, socket); 


Ye 
由 
上 述 代 码 将 通过 socket 服 务 器 的 connection 事 件 来 加 载 聊天 室 控 制 器 ， 这 便 可 以 将 事件 处 
理 程序 绑 定 到 与 服务 器 连 接 的 socket 上。 


























到 此 ,服务器 端的 实现 便 完成 了 。 接 下 来 , 便 要 在 AngularJS 应 用 中 实现 聊天 相关 的 功能 ， 
首先 从 AngularJS 的 聊天 服务 开始 。 
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9.4.2 ”在 AngularJS 中 创建 Socket 服 务 


使 用 Socket.io 窜 户 端 方法 创建 与 socket 服 务 器 的 连接 后 ,会 返回 一 个 socket 客 户 端 实例 ,利用 
它 便 可 以 实现 与 服务 器 间 的 通信 。 由 于 使 用 JavaScript 全 局 对 象 并 非 上 策 , 因此 可 以 利用 AngularJS 
服务 的 单 例 体系 结构 来 封装 socket 客 户 端 。 


首先 ,创建 模块 文件 夹 public/chat， 然 后 进入 新 建 的 文件 来 ， 创 建 初始 化 文件 chat.client. 
module.js， 并 为 其 输入 如 下 代码 : 



































angular.module('chat', []); 


然后 创建 public/chat/services 文 件 来 ， 用 来 放置 AngularJS socket 服 务 。 进 入 新 创建 的 文件 夹 ， 
创建 chat.client.service.js 文 件 ， 并 为 其 输入 如 下 代码 : 


angular.module('chat') .service('Socket', 'Authentication', '$location', 'S$timeout', 
function(Authentication, S$location, Stimeout) { 
if (Authentication.user) { 
this.socket = io(); 
} else { 
slocation.path('/'); 











} 


this.on = function(eventName, callback) { 
if (this.socket) { 
this.socket.on(eventName, function(data) { 
Stimeout (function() { 
callback (data); 
} 
ps 
由 
站 





this.emit = function(eventName, data) { 
if (this.socket) { 
this.socket.emit (eventName, data); 
} 
} 


this.removeListener = function(eventName) { 
if (this.socket) { 
this.socket.removeListener (eventName); 
} 
二 
} 
jy》 


来 看 看 这 上段 代码 , 创建 chat 服 务 时 , 注入 了 多 个 对 象 和 服务 。 上 述 代 码 使 用 Authentication 
服务 检查 了 用 户 是 否 是 登录 过 的 ， 如 果 没 有 则 使 用 $location 服 务 跳 转 到 主页 。 由 于 AngularJS 
服务 是 延迟 加 载 的 , 因此 Socket 服 务 只 有 在 请 求 时 才 加 载 , 这 样 可 以 防止 未 验证 的 用 户 使 用 Socket 
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服务 。 如 果 用 户 通过 了 身份 验证 , Socket 服 务 便 可 通过 调用 Socketio 的 io () 方 法 来 设置 其 socket 


盟 性 。 


接 下 来 为 服务 封装 了 emit () 、on () 和 removeListener () 方 法 。 其 中 on () 最 需要 注意 , 该 
方法 使 用 了 AngularJS 中 的 一 个 小 技巧 一 一 $timeout 服 务 。 这 里 需要 解决 的 一 个 重要 问题 是 ， 
AngularJS 的 双向 数据 绑 定 只 支持 在 框架 内 执行 的 方法 。 因 此 ， 除 非 将 第 三 方 的 事件 通知 给 
AngularJS 编 译 器 ， 否 则 AngularJS 编 译 需 无 法 获知 这 些 事件 在 数据 模型 中 带 来 的 变化 。 在 这 个 聊 
天 室 中 , 集成 到 服务 的 socket 客 户 端 是 一 个 第 三 方 库 , 因此 任何 来 自 socket 客 户 端的 事件 都 不 会 触 
发 AngularJS 的 绑 定 操作 。 为 了 解决 这 一 问题 ， 可 以 借助 Sapply 方 法 和 sdqigest 方 法 。 但 这 又 常 
会 导致 另外 一 个 错误 ， 即 上 一 个 Saigest 还 没 执行 完 , 下 一 个 又 开始 执行 了 。 一 个 比较 好 的 解决 
方案 是 使 用 stimeout () 。stimeout () 服 务 是 window.setTimeout () 方 法 的 AngularJS 封 装 ， 
因此 直接 调用 $timeout () 方 法 ,不 需要 传人 timeout 参 数 , 便 可 解决 绑 定 问题 ， 同 时 也 不 影响 
用 户 体验 。 


Socket 服 务 完成 后 ， 接 着 要 实现 的 便 是 客户 端 聊天 室 控制 器 和 视图 ， 首 先 需要 完成 聊天 室 控 
制 器 部 分 。 
















































































9.4.3 ”控制 器 


聊天 室 控制 器 主要 用 来 实现 AngularJS 的 聊天 功能 。 为 创建 聊天 控制 器 ， 首 先 创建 
public/chat/controllers 文 件 夹 , 然后 在 其 中 创建 chat.client.controler.js 文 件 , 然后 为 其 输入 如 下 代码 : 





angular.module('chat') .controller('ChatController', ['S$scope', 'Socket', 
function($scope, Socket) { 
$scope.messages = []; 
Socket.on('chatMessage', function(message) { 
$scope.messages.push (message); 


}); 


Sscope.sendMessage = function() { 
Var message = { 
text: this.messageText, 


Socket .emit ('chatMessage', message); 


this.messageText = '' 


} 
Sscope.$son('S$Sdestroy', function() { 


Socket .removeListener('chatMessage'); 
} 
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在 控制 器 中 ， 首 先 创建 了 一 个 历史 消息 数组 ， 实 现 了 chatMessage 事 件 的 监听 器 ， 该 监听 
器 用 于 把 获得 的 消息 加 入 历史 消息 数组 中 。 接 着 创建 了 sendqMessage () 方 法 ， 该 方法 通过 触发 
chatMessage 事 件 将 新 的 消息 发 送 给 socket 服 务 器 。 最 后 ， 使 用 了 AngularJS 内 置 的 Saestroy 事 
件 ， 它 会 在 销毁 控制 器 时 触发 ， 用 来 删除 socket 客 户 端的 chatMessage 事 件 监 听 器 。 该 操作 非常 
重要 ， 因 为 如 果 不 删 除 chatMessage 事 件 监 听 器 ， 事 件 处 理 程序 会 一 直 执 行 。 

















9.4.4 视图 


聊天 室 视图 由 一 个 简单 的 表单 和 聊天 历史 消息 列表 构成 。 为 保存 聊天 室 视图 ， 首 先 创建 
public/chat/views 文 件 夹 ， 进 入 新 创建 的 文件 夹 ， 在 其 中 创建 chat.client.view.html 文 件 ， 代 码 如 下 : 





<section data-ng-controller="ChatController"> 
<div data-ng-repeat="message in messages" data-ng-switch="message.type"> 
<strong data-ng-switch-when='status'> 
<span data-ng-bind="message.created | date:'mediumTime'"></span> 
<span data-ng-bind="message.username"></span> 
<span>is</span> 
<span data-ng-bind="message.text"></span> 
</strong> 
<span data-ng-switch-default> 
<span data-ng-bind="message.created | date:'mediumTime'"></span> 
<span data-ng-bind="message.username"></span> 
<span>:</span> 
<span data-ng-bind="message.text"></span> 
</span> 








</div> 
<form ng-submit="sendMessage();"> 
<input type="text" data-ng-model="messageText"> 
<input type="submit"> 
</form> 
</section> 


在 视图 中 ，ng-repeat 指 令 被 用 来 填充 消息 列表 ，ng-switch 指 令 被 用 来 分 别 显示 状态 消 
息 和 普通 消息 。 同 时 ，AngularJS 的 data 过 滤器 将 准确 地 显示 时 间 。 视 图 的 最 后 ， 有 一 个 使 用 了 
ng-submit 指 令 的 简单 表单 ， 该 表单 提交 时 会 调用 senqMessage () 方 法 。 下 一 步 ， 需 要 添加 
个 路 由 ， 来 控制 视图 的 显示 。 


























9.4.5 ”路 由 


新 的 视图 创建 好 以 后 ， 需 要 为 其 添加 对 应 的 路 由 ， 它 才能 够 正常 地 显示 出 来 。 创 建 
public/chat/config 文 件 夹 ,然后 在 新 的 文件 夹 中 创建 chat.clientroutes.js 文 件 ,并 为 其 输入 如 下 代码 : 








angular.modqule('chat').config(['SrouteProvider '， 
function($routeProvider) { 
SrouteProvider. 
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when('/chat', { 

templateUrl: 'chat/views/chat.client.view.html' 

a 
} 

下 


路 由 的 代码 已 经 再 熟悉 不 过 了 ， 这 里 就 不 再 解读 了 。 最 后 来 完成 聊天 室 实现 的 最 后 一 步 。 


























9.4.6 ”实现 


上 文中 已 经 新 建 了 多 个 文件 , 包括 Socket.io 的 客户 端 包 文 件 , 都 需要 添加 到 应 用 的 主页 面 中 。 
编辑 app/views/index.ejs 文 件 ， 修 改 如 下 : 




















<!DOCTYPE html> 
<html] xmlns:ng="http://angularjs.org"> 
<head> 
<title><%= title %$></title> 
</head> 
<body> 
<section ng-view></section> 


<script type="text/javascript"> 
window.user = <%- user || ‘'null' 


oo 
V 


</script> 


<script type="text/javascript" src="/socket.io/socket.io.js"></script> 

<script type="text/javascript" src="/lib/angular/angular.js"></script> 

<script type="text/javascript" src="/lib/angular-route/angularroute.js"></script> 

<script type="text/javascript" src="/lib/angular-resource/angularresource.js"> 
</script> 


<script type="text/javascript 
</script> 
<script type="text/javascript 
CONGroOlTLer. eS/SCr1pt> 
<script type="text/javascript 
service.js"></script> 
<script type="text/javascript 
js"></script> 


src="/articles/articles.client.module.js"> 


src="/articles/controllers/articles.client. 


src="/articles/services/articles.client. 


src="/articles/config/articles.client.routes. 


<script type="text/javascript 
module.js"></script> 
<script type="text/javascript 
client.controller.js"></script> 
<script type="text/javascript 
</script> 


src="/example/example.client. 


src="/example/controllers/example. 





src="/example/config/example.client.routes.js"> 


<script type="text/javascript 
<script type="text/javascript 
service.js"></script> 


src="/users/users.client.module.js"></script> 
src="/users/services/authentication.client. 
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<script type="text/javascript" src="/chat/chat.client.module.js"></script> 

<script type="text/javascript" src="/chat/services/socket.client.service.js"> 
</script> 

<script type="text/javascript" src="/chat/controllers/chat.client.controller. 
js"></script> 


<script type="text/javascript" src="/chat/config/chat.client.routes.js"> 
</script> 


<script type="text/javascript" src="/application.js"></script> 
</body> 
< ET 学 


请 注意 ， 上 面 的 代码 把 Socket.io 库 文件 放 在 JavaScript 文 件 包 含 最 开始 的 位 置 。 一 般 最 好 是 在 
应 用 本 身 的 JavaScript 文 件 之 前 引用 第 三 方 的 库 文件 。 接 着 ,修改 public/application.js 文 件 中 ， 引 
用 新 添加 的 cnat 模 块 ， 如 下 : 











Var mainApplicationModuleName = 'mean'; 


var mainApplicationModule = angular.module (mainApplicationModuleName, 
['ngResource', 'ngRoute', 'users', 'example', 'articles', 'chat']); 


mainApplicationModule.config(['$locationPprovider', 
function($locationProvider) { 
SlocationProvider.hashprefix('!'); 
} 
人 


if (window.location.hash === '#_=_') window.location.hash = '#!'; 
angular.element (document) .ready (function() { 


angular.bootstrap(document, [mainApplicationModuleNamel]); 
9 过 





最 后 , 在 首页 中 添加 一 个 聊天 室 的 链接 , 修改 public/example/views/example.client.view.js 如 下 : 


<section ng-controller="ExampleController"> 
<div data-ng-show="!authentication.user"> 
<a href="/signup">Signup</a> 
<a href="/signin">Signin</a> 
</div> 
<div data-ng-show="authentication.user"> 
<h1>Hello <span data-ng-bind="authentication.user.fullName"></span></h1> 
<a href="/signout">Signout</a> 
<ul> 
<li><a href="/#!/chat">Chat</a></1i> 
<li><a href="/#!/articles">List Articles</a></1i> 
<li><a href="/#!/articles/create">Create Article</a></1i> 
</ul> 
</div> 
</section> 


做 完 这 些 修改 ,聊天 室 就 完成 了 。 使 用 命令 行 工具 进入 MEAN 应 用 的 根 目 录 ,， 用 下 面 的 命令 
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运行 应 用 : 

$ node server 

应 用 启动 后 , 使 用 两 个 浏览 器 ， 用 不 同 的 用 户 进行 登录 ， 再 进入 http://localhost:3000/#!/chat， 
分 别 在 两 个 浏览 器 发 送 几 个 消息 试 试 。 可 以 发 现 聊 天 记录 是 实时 更 新 的 ,示例 MEAN 应 用 已 经 支 
持 浏览 器 与 服务 器 间 的 实时 通信 。 
































9.5 总 结 


本 章 介绍 了 Socket'io 模 块 是 如 何 工 作 的 。 首 先 阐释 了 Socketio 的 主要 特性 以 及 客户 端 和 服务 
器 端的 通信 和 方式， 然后 介绍 了 Socket.io 的 配置 及 与 Express 应 用 的 集成 ， 其 中 包括 了 Socket.io 的 
握手 配置 及 与 Passport 会 话 的 集成 。 最 后 ， 演 示 了 如 何 创建 一 个 功能 完整 的 聊天 室 ， 以 及 怎样 使 
用 AngularJS 服 务 来 封装 Socket,io 客 户 端 。 下 一 章 将 介绍 如 何 编写 和 执行 覆盖 MEAN 应 用 代码 的 
测试 。 
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MEAN 应 用 的 测试 











在 前 面 的 内 容 中 ， 我 们 讲述 了 如 何 创建 实时 的 MEAN 应 用 ， 并 介绍 了 Express 和 AngularJS 的 
基本 知识 , 以 及 如 何 结合 使 用 这 些 部 分 。 但 随 着 应 用 的 不 断 开 发 ,功能 逐渐 变 多 , 逻辑 愈 发 复杂 ， 
人 工 检查 代码 将 会 变 得 越 来 越 困 难 。 这 时 ， 最 需要 的 是 应 用 测试 的 自动 化 。Web 应 用 的 测试 ， 一 
度 是 非常 麻烦 的 , 但 随 着 一 些 新 的 测试 工具 和 相应 的 测试 框架 的 出 现 , 测试 工作 大 幅 简化 。 本 章 
将 介绍 如 何 使 用 现代 化 的 测试 框架 和 主流 的 测试 工具 实现 覆盖 MEAN 应 用 代码 的 测试 。 主要 内 容 
包括 : 


口 JavaScript 的 TDD 和 BDD 测 试 简介 

口 配置 测试 环境 

口 安装 和 配置 Mocha 测 试 框架 

口 编写 针对 Express 模 块 和 控制 器 的 测试 

口 安装 和 配置 测试 执行 过 程 管理 工具 Karma 
口 使 用 Jasmine 执 行 AngularJS 实 体 的 单元 测试 
口 编写 和 运行 端 到 端 (E2E ) AngularJS 测 试 
























































10.1 _ JavaScript 测试 简介 


众所周知 ， 在 过 去 的 几 年 里 ，JavaScript 的 地 位 发 生 了 戏剧 性 的 变化 。 它 曾经 只 是 一 个 编写 
Web 应 用 的 简单 脚本 语言 , 不 过 现在 无 论 是 在 浏览 器 端 还 是 在 服务 器 端 ，JavaScript 都 已 成 为 这 套 
复杂 体系 结构 的 主干 。 但是, 这 也 使 得 开发 人 员 不 得 不 手工 去 管理 缺乏 必要 自动 化 测试 的 庞大 代 
码 库 。Java、.NET 和 Ruby 的 开发 人 员 早 已 能 编写 和 执行 保证 安全 性 和 稳定 性 的 测试 ，JavaScript 
开发 人 员 在 完善 测试 应 用 方面 ,依然 处 于 “无 人 苇 野 ” 般 的 境地 。 直 到 不 久 前 ， 这 一 空白 才 由 来 
自 JavaScript 社 区 的 天 才 们 开发 的 新 工具 和 测试 框架 所 填补 。 本 章 将 介绍 一 些 主流 的 工具 。 但 要 注 
意 的 是 ,JavaScript 测 试 依然 是 一 个 魏 新 的 领域 , 很 多 都 在 持续 不 断 地 改进 ， 有 不 少 新 的 解决 方案 
都 值得 关注 。 

本 章 将 主要 讨论 以 下 两 类 测试 : 单元 测试 和 E2E 测 试 。 单 元 测试 用 于 验证 一 段 相 对 独立 的 代 
码 。 这 使 开发 人 员 要 力求 对 覆盖 应 用 最 小 的 可 测试 部 分 逐一 编写 单元 测试 。 例 如 ， 如 果 要 对 一 个 
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ORM (Object-Relational Mapping， 对 象 关系 映射 ) 编写 单元 测试 ， 不 仅 要 对 数据 的 验证 编写 测 
试 ， 还 要 给 出 对 应 的 验证 错误 作为 输出 。 因 此 , 开发 人 员 常 常 选择 较 大 的 、 处 理 独立 操作 的 代码 
单元 编写 单元 测试 。 如 果 要 针对 包含 多 个 软件 组 件 的 混合 代码 进行 测试 , 就 需要 用 到 E2E 测 试 了 。 
E2E 用 来 编写 对 路 应 用 的 功能 进行 验证 的 测试 ， 一 般 都 要 求 开 发 人 员 使 用 多 个 工具 ， 并 横 跨 应 用 
的 多 个 部 分 ， 比 如 像 UI、 服 务 器 端 和 数据 库 组 件 等 。 其 中 ， 使 用 E2E 测 试 来 验证 注册 流程 就 是 一 
个 典型 的 例子 。 针 对 应 用 编写 合适 的 测试 方案 中 的 关键 步骤 是 识别 正确 的 测试 。 不管 怎样 ,为 开 
发 团队 设立 合理 的 约定 将 会 使 测试 容易 得 多 。 


在 开始 讨论 具体 的 JavaScript 测 试 工具 之 前 ,我 们 首先 来 简单 了 解 一 下 对 日 常 开发 具有 重要 影 
响 的 TDD 模 式 。 













































































10.1.1 TDD、BDD 和 单元 测试 


TDD( Test-Driven Development ,测试 驱动 开发 是 由 软件 工程 师 ,敏捷 开发 的 倡导 者 Kent Beck 
提出 的 。 根 据 TDD 理 论 ， 开 发 流程 始 于 测试 编写 (最初 失败 )， 并 根据 独立 代码 的 预期 ， 开 始 定 
义 需 求 。 接 着 开发 人 员 用 最 少 的 代码 量 来 执行 并 通过 测试 。 当 测试 通过 后 ， 再 回头 整理 代码 ,并 
逐一 验证 测试 。 下 图 展示 了 TDD 的 开发 周期 。 





















































测试 成 功 
测试 失败 
编写 测试 一 运行 测试 编写 代码 
测试 失败 
运行 测试 
测试 成 功 
测试 成 功 … 
E 清除 代码 
测试 失败 
' 
运行 测试 
TDD 周 期 
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有 一 点 需要 明确 , 虽然 TDD 是 现代 软件 开发 中 一 个 很 流行 的 方法 , 但 单纯 靠 它 是 难以 满足 项 
目 需求 的 。 为 了 简化 流程 ， 提 升 团 队 的 沟通 ， 在 TDD 基 础 上 产生 了 BDD ( Behavior-Driven 
Development, 行为 驱动 开发 )。 这 一 方法 由 Dan North 提 出 ,用 于 帮助 开发 人 员 确 定单 元 测试 的 边 
界 ， 并 利用 行为 术语 来 表达 测试 流程 。BDD 范 式 是 TDD 的 一 个 子 集 。 简 单 地 说 ，TDD 提 供 了 测 
试 编写 的 大 体 要 领 ，BDD 提 供 编 写 测试 的 具体 术语 。 通 常情 况 下 ，BDD 测 试 框架 都 提供 了 很 多 
容易 理解 的 方法 来 描述 测试 流程 。 


虽然 BDD 提 供 了 整套 的 测试 编写 机 制 ， 但 在 JavaScript 环 境 中 执行 这 些 测试 依旧 很 麻烦 。 应 
用 在 不 同 的 浏览 器 ， 甚 至 同一 浏览 器 的 不 同 版 本 上 ， 出 现 的 问题 都 可 能 不 一 样 。 因 此 ， 单 为 一 个 
浏览 器 编写 测试 , 并 不 能 为 代码 质量 提供 足够 的 保证 。 为 了 解决 这 个 问题 ,JavaScript 社 区 开发 了 
大 量 用 于 编写 、 评 估 和 执行 测试 的 工具 。 











































































































10.1.2 ”测试 框架 


虽然 通过 自 定义 的 库 便 可 以 编写 测试 , 不 过 我 们 很 快 就 会 发 现 , 编写 一 个 如 此 复杂 的 基础 工 
有 具 , 一 来 工作 量 难以 计量 ,二 来 好 像 也 没 必要 。 一 些 可 敬 的 人 们 已 经 为 这 一 问题 付出 了 大 量 的 努 
力 , 开发 出 了 多 个 主流 的 测试 框架 , 帮助 开发 人 员 更 简便 地 编写 结构 化 的 测试 。 这 些 测试 框架 一 
般 都 提供 了 大 量 用 于 封装 测试 的 方法 ， 同 样 还 提供 了 一 些 API， 用 于 运行 测试 ， 以 及 将 测试 结果 
集成 到 开发 工作 中 的 其 他 工具 中 。 



















































































10.1.3 ”断言 库 


测试 框架 为 开发 人 员 提 供 了 开发 和 组 织 测 试 的 方法 , 但 在 实际 测试 中 , 这 些 框 架 往往 都 缺少 
对 测试 结果 进行 逻辑 判断 的 功能 。 比 如 说 下 一 节 中 将 要 介绍 的 Mocha 测 试 框架 ,该 框架 就 不 提供 
断言 工具 。 为 此 ,社区 开发 了 一 些 断 言 库 ， 以 便 检查 某 些 断 言 。 在 测试 语 境 中 ,开发 人 员 通 过 使 
用 断言 表达 式 来 确定 一 个 断言 结果 是 否 为 真 。 在 运行 测试 时 , 由 断言 来 评估 测试 结果 ,要 是 结果 
为 false， 那 就 表明 测试 的 结果 为 失败 。 















































10.1.4 测试 执行 过 程 管理 工具 


开发 人 员 借助 测试 执行 过 程 管理 工具 ， 可 以 更 简便 地 执行 和 评估 测试 。 一 个 测试 执行 过 程 管 
理工 具 一 般 都 使 用 某 一 个 测试 框架 及 一 套 预 先 配置 好 的 设置 ， 在 不 同 的 语 境 中 评估 测试 结果 。 比 
如 ， 测 试 执行 过 程 管理 工具 可 配置 不 同 的 环境 变量 来 执行 测试 ， 或 在 不 同 的 测试 平台 (一 般 是 不 
同 的 浏览 右 ) 执行 某 一 测试 。 在 AngularJS 测 试 部 分 , 将 会 介绍 两 个 不 同 的 测试 执行 过 程 管理 工具 。 


上 述 内 容 对 一 些 测 试 术语 做 了 简明 的 介绍 , 接 下 来 的 内 容 将 曾 述 如 何 对 MEAN 应 用 的 各 部 分 
进行 测试 。 虽 然 该 应 用 都 是 用 JavaScript 编 写 的 ， 但 它 的 各 个 部 分 其 实 都 运行 于 不 同 的 平台 之 上 ， 
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而 且 其 对 应 的 应 用 场景 也 不 尽 相 同 。 为 了 简化 这 一 测试 流程 ， 我 们 将 其 分 为 两 个 部 分 : Express 
组 件 测试 和 AngularJS 组 件 测试 。 先 来 看 看 Express 应 用 组 件 的 测试 。 





10.2 “Express 应 用 测试 


在 MEAN 应 用 的 Express 部 分 中 ,大 部 分 应 用 逻辑 都 封装 在 控制 器 中 。 但 Mongoose 的 模型 也 承 
担 了 部 分 工作 ， 比 如 数据 的 操作 和 验证 。 因 此 ， 要 合理 地 才 盖 Express 应 用 的 代码 ， 就 需要 同时 针 
对 模型 和 控制 器 来 编写 相应 的 测试 。 为 此 , 可 以 将 Mocha 做 为 测试 框架 , 将 Should,js 断 言 库 做 为 测 
试 模 型 ， 将 SuperTest HTTP 上 断言 库 做 为 测试 控制 器 。 为 了 给 测试 提供 一 些 特 殊 的 测试 配置 选项 ， 
还 需要 创建 一 个 测试 环境 配置 文件 ， 如 MongoDB 专 用 的 连接 字符 串 等 。 在 本 部 分 的 结尾 ， 你 将 会 
学 习 如 何 使 用 Mocha 的 命令 行 工具 来 执行 和 评估 测试 结果 。 首 先 ， 请 了 解 一 下 Mocha 测 试 框架 。 









































10.2.1 ” Mocha 简介 

















Mocha 是 由 Express 的 作者 TJ Holowaychuk 开 发 的 通用 测试 框架 。 它 支持 TDD 和 BDD 单 元 测 
试 , 使 用 Node.js 执 行 测试 , 且 支 持 同 步 和 异步 代码 的 测试 Mocha 遵 循 了 Node.js 的 扩展 开发 理念 ， 
并 没有 内 置 断言 库 。 不 过 它 支 持 与 主流 断言 框架 的 集成 。Mocha 有 多 个 不 同 的 报告 生成 器 ， 支 持 
输出 多 种 格式 的 测试 结果 ， 还 支持 像 暂 停 测 试 、 排 除 测试 和 空白 测试 。Mocha 的 使 用 主要 是 通过 
命令 行 工具 实现 的 。 通 过 命令 行 工 具 ， 可 以 对 测试 及 其 对 应 的 生成 报告 进行 配置 。 


Mocha 测 试 的 BDD 接 口 包 括 多 个 描述 方法 ,测试 人 员 可 以 利用 这 些 方法 对 测试 场景 进行 描 
述 。 上 述 方法 如 下 。 


D describe (description, callpback): 将 测试 集 利 用 描述 进行 封装 的 基本 方法 ， 回 调 
函数 用 于 定义 测试 指标 和 测试 子 集 。 
口 it (description，callback): 将 测试 指标 利用 描述 进行 封装 的 基本 方法 ， 回 调 函 数 
用 于 定义 实际 的 测试 逻辑 。 
口 pefore (callback) : 勾 子 函数 ， 会 在 测试 集运 行 之 前 执行 一 次 。 
口 peforeEach (callback): 勾 子 函数 ,与 before (callback) 的 区 别 在 于 ， 它 会 在 每 个 
测试 指标 运行 之 前 都 执行 一 次 。 
口 after (callback) : 勾 子 函数 ， 会 在 测试 集运 行 完成 之 后 执行 一 次 。 
口 aftterEach (callback) : 勾 子 函数 ， 与 after (callback) 的 区 别 在 于 ， 它 会 在 每 个 测 
试 指标 运行 之 后 都 执行 一 次 。 

通过 这 些 方 法 , 便 可 以 遵循 BDD 范 式 对 单元 测试 进行 定义 。 不 过 , 任何 测试 都 需要 通过 判定 
目标 代码 的 测试 结果 是 否 符合 开发 人 员 的 预期 从 而 得 出 对 应 的 测试 结论 。 但 如 果 没 有 断言 表达 
式 ， 将 无 法 对 代码 预期 进行 判定 。 因 此 ， 为 了 对 测试 结果 进行 认定 ， 就 需要 用 到 断言 库 。 
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| 了 解 更 多 关于 Mocha 功 能 的 相关 信息 ， 请 参阅 http://mochajs.org。 | 


10.2.2 ”Shouldjs 简 介 


Should.js 库 同样 由 TJ Holowaychuk 开 发 ， 旨 在 帮助 开发 人 员 编写 兼 具 可 读 性 和 功能 性 的 验证 
表达 式 。 使 用 Should.js， 不 仅 可 以 更 好 地 组 织 代码 测试 ， 还 可 输出 有 用 的 错误 信息 。Should.js 库 
通过 一 个 隐藏 的 getter 对 object .prototype 进 行 扩展 ， 以 便 测试 人 员 对 某 一 对 象 的 具体 代码 行 
为 进行 设 定 。Should.js 其 中 一 个 强大 的 特性 是 每 个 断言 都 会 被 封装 为 对 象 ， 因 此 可 用 链 式 方式 组 
织 断 言 。 由 此 便 可 以 针对 测试 对 象 编写 可 读 性 更 强 的 表达 式 对 断言 进行 更 好 地 描述 。 比 如 像 下 面 
这 样 的 链 式 断言 表达 式 : 


user.should.be.an.Object.and.have.property('name', 'tj'); 




























































































注意 ,每 一 个 扩展 属性 都 会 返回 一 个 Should.js 对 象 ， 这 样 便 可 以 与 另 一 个 扩 

展 属 性 (如 be、an 和 have 等 ) 或 断言 属性 或 方法 (Object .property() ) 链 

~ 接 起 来 。 了 解 更 多 关于 Should.js 功 能 的 相关 信息 ， 请 参阅 https:Wgithub.comy 
shouldjs/should.js 中 的 官方 文档 。 





虽然 Shouldjs 在 测试 对 象 这 方面 做 得 非常 不 错 ， 但 它 并 不 能 用 来 测试 HTTP 服 务 端 请 求 。 为 
此 ， 这 里 需要 借助 其 他 类 型 的 断言 库 。 这 也 是 为 何 Mocha 最 小 模块 化 框架 用 起 来 得 心 应 手 的 原 
可 以 更 加 方便 地 进行 功能 扩展 。 


























10.2.3 ”SuperTest 简 介 


与 其 他 断言 库 不 同 的 是 ，SuperTest 为 测试 人 员 提 供 了 创建 HTTP 汤 言 的 抽象 屋 ， 没 错 ， 它 仍 
旧 是 由 TJ Holowaychuk 开 发 的 。 它 并 不 是 用 来 测试 对 象 的 ， 而 是 用 来 创建 针对 HTTP 服 务 端的 相 
关 测 试 的 断言 表达 式 的 。 在 这 里 , 我 们 用 它 来 测试 控制 器 , 可 用 来 覆盖 所 有 暴露 给 浏览 器 的 代码 。 
因此 ， 它 会 使 用 Express 应 用 程序 对 象 ， 用 以 测试 Express 服 务 端 的 响应 。 下 面 是 一 个 SuperTest 源 
言 表 达 式 的 例子 : 
request (app) .get ('/user') 
.Set ('Accept', 'application/json') 


.expect ('Content-Type', /json/) 
.expect (200, done); 
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以 对 同一 个 响应 执行 多 个 断言 检查 。 了 解 更 多 关于 SuperTest 功 能 的 相关 信息 , 请 


注意 , 这 里 的 每 个 方法 都 可 以 直接 链接 在 前 一 个 断言 表达 式 之 后 , 这 样 便 可 
参阅 https://github.com/visionmedia/supertest 中 的 官方 文档 。 


下 一 节 将 介绍 如 何 运 用 Moncha、Should.js 以 及 SuperTest 对 模型 和 控制 咒 进 行 测试 。 首 先 我 们 
将 从 安装 依赖 和 配置 测试 环境 开始 。 本 章 中 的 示例 程序 将 沿用 前 面 的 示例 ， 直 接 复 制 第 9 章 的 最 
终 示例 代码 即 可 。 




















10.2.4 Mocha 的 安装 
从 根本 上 说 ，Mocha 是 一 个 提供 命令 行 方式 运行 测试 的 Node.js 模 块 。 要 想 使 用 该 模块 ， 最 简 
单 的 办 法 便 是 使 用 npm， 以 全 局 方式 进行 安装 。 进 入 命令 行 工 具 ， 执 行 如 下 命令 来 安装 Mocha: 


$ npm install -g mocha 


这 样 ， 便 可 以 将 最 新 版 本 的 Mocha 安 装 到 系统 全 局 node modules 目 录 中 。 安 装 完成 后 ， 可 以 
通过 命令 行 工具 运行 Mocha。 下 一 步 将 在 应 用 目录 中 安装 Shouldjs 和 SuperTest 上 断言 库 。 




















KW 安装 全 局 模块 的 时 候 可 能 会 碰 到 一 些 问 题 ， 一般 是 权限 所 致 ， 使 用 sudo 
ee 户 来 执行 全 局 安装 命令 即 可 。 


10.2.5 安装 Shouldjs 和 SuperTest 模 块 





在 开始 编写 测试 之 前 ， 首 先 需要 使 用 npm 安 装 Should.js 和 SuperTest。 修 改 package.json 文 件 ， 
如 下 所 示 : 


{ 

"name": "MEAN", 

"version": "0.0.10", 

"dependencies": { 
"express": "~4.8.8", 
"morgan™. xl.3.0", 
"compression".: ™~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"eqs Tel 0 0 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
"assports T0201 
"passport-local™": "~1.0.0", 
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"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
SOGkKEt TON Vyl; .0 
"connect-mongo": "~0.4.1", 
"Cookie-parser": "~1.3.3" 

3 

"devDependencies": { 
"should": "~4.0.4", 
"supertest": "~0.13.0" 

} 

} 


注意 ， 在 这 里 我 们 往 package.json 中 添加 了 一 个 名 为 levDependencies 的 新 属性 。npm 可 以 
配置 与 应 用 依赖 分 离 的 ， 只 用 于 面向 开发 工作 的 依赖 。 这 意味 着 ， 当 将 应 用 部 署 到 生产 环境 时 ， 
安装 速度 要 快 一 些 , 安装 完 的 应 用 也 要 小 一 些 。 而 在 非 生产 环境 中 , 面向 开发 工作 的 依赖 便 可 与 
应 用 依赖 共同 安装 。 


为 了 安装 新 的 依赖 ， 使 用 命令 行 工具 进入 应 用 根 目 录 ， 然 后 执行 如 下 的 命令 


$ npm install 


如 此 便 可 将 指定 版 本 的 Should.js 和 SuperTest 安 装 到 应 用 的 node modules 目 录 中 , 安装 成 功 后 ， 
可 以 在 测试 中 使 用 这 两 个 模块 。 下 一 步 需 要 为 项 目测 试 做 一 些 准备 工作 , 其 中 包括 创建 新 的 环境 
配置 文件 以 及 测试 环境 的 配置 。 


























10.2.6 ”测试 环境 配置 


由 于 即将 进行 的 测试 会 涉及 数据 库 操作 ,因此 考虑 到 安全 因素 , 还 是 使 用 单独 的 配置 文件 为 
好 。 好 在 示例 程序 是 按照 NOoDE_ENV 这 个 系统 环境 变量 来 加 载 配置 文件 的 ， 默 认 使 用 
config/env/development.js 这 一 文件 。 在 执行 测试 时 ， 只 需 保证 将 测试 环境 的 环境 变量 NODE_ENV 
设置 为 test 即 可 。 接 下 来 要 做 的 ， 是 为 测试 环境 创建 一 个 新 的 配置 文件 ， 并 将 其 命名 为 testjs， 
同样 存放 在 config/env 目 录 。 文 件 内 容 如 下 : 



































module.exports = { 
db: 'mongodb://localhost/mean-book-test', 
sessionSecret: 'Your Application Session Secret', 
viewEngine: 'ejs', 
facebook: { 
clientID: 'APP_ID', 
clientSecret: 'APP_SECRET', 
callbackURL: 'http://localhost:3000/0auth/facebook/callback' 
}, 
twitter: { 
clientID: 'APP_ID', 
clientSecret: 'APP_SECRET', 
callbackURL: 'http://localhost:3000/o0auth/twitter/callback' 
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} 
google: { 
clientID: 'APP_ID', 
clientSecret: 'APP_SECRET', 
callbackURL: 'http://localhost:3000/0auth/google/callback' 
} 
5 


注意 ， 相 对 于 config/envdevelopmentjs 文 件 ， 上 述 代码 修改 了 数据 库 的 配置 ， 使 用 了 不 同 的 
MongoDB 数 据 库 ， 其 他 的 属性 并 无 变动 。 测 试 时 还 是 可 以 对 配置 文件 做 不 同 修改 来 检查 。 


接 下 来 需要 为 测试 所 需要 的 文件 创建 一 个 专门 的 文件 夹 。 进 入 app 文 件 夹 ， 创 建 tests 子 文件 
夹 。 测 试 环境 配置 好 后 ， 下 一 步 便 可 以 开始 编写 测试 了 。 

















10.2.7 ”编写 Mocha 测 试 


要 编写 测试 , 第 一 步 是 识别 Express 应 用 的 组 件 , 并 为 其 划分 可 测试 单元 。 由 于 应 用 的 逻辑 已 
经 分 离 在 模型 和 控制 妖 上 上 了， 显而易见 ， 在 此 只 需 对 模型 和 控制 如 进行 分 别 测试 。 接 下 来 ,需要 
将 这 些 组 件 划 分 为 代码 逻辑 单元 , 再 逐一 单独 测试 。 比 如 ,针对 控制 器 内 的 每 个 方法 分 别 编写 多 
个 测试 。 如 果 并 不 是 每 个 方法 都 对 重要 的 操作 进行 单独 处 理 ， 在 此 也 可 以 将 多 个 方法 一 同 测试 。 
但 Mongoose 的 模型 就 不 一 样 了 ， 需 要 针对 每 个 模型 方法 单独 测试 。 


在 BDD 范 式 中 ， 每 个 测试 都 是 以 用 日 常 语言 对 测试 目的 进行 描述 开始 的 。 该 描述 可 以 通过 
qescripe() 方 法 来 完成 。 这 一 方法 用 于 定义 测试 方案 的 描述 与 功能 。qescribe 是 可 以 拒 套 的 ， 
便于 对 测试 做 进一步 的 阐述 。 测 试 的 描述 结构 完成 后 ， 可 以 使 用 it () 方 法 定义 测试 指标 ， 测 试 
框架 会 将 每 一 个 it () 语句 块 作为 一 个 单元 测试 ， 每 个 都 需要 一 个 或 多 个 断言 表达 式 。 断 言 表达 
式 的 基本 功能 就 是 针对 测试 假设 给 出 布尔 值 的 测试 结果 ,如 果断 言 表 达 式 执行 的 结果 是 失败 , 则 
会 给 测试 框架 一 个 错误 追踪 对 象 。 

上 述 内 容 已 经 涵盖 了 绝 大 多 数 的 测试 场景 , 但 还 有 一 些 支 持 性 的 方法 , 可 以 用 于 测试 的 上 下 
文 环境 中 执行 特定 功能 。 这 些 文 持 性 的 方法 稍 加 配置 ， 便 可 在 测试 集运 行 之 前 或 之 后 执行 ,也 可 
以 在 单个 测试 运行 之 前 或 之 后 执行 。 

在 本 章 后 面 的 例子 中 , 将 简单 介绍 使 用 各 个 方法 来 测试 第 8 章 中 的 articles 模 块 。 考虑 到 精简 ， 
将 只 为 每 个 组 件 实现 一 套 简 单 的 测试 ， 这 套 测试 能 够 也 应 该 最 终 扩展 成 为 适当 代码 覆盖 的 测试 。 






















































































虽然 TDD 范 式 讲求 在 编码 开发 之 前 编写 测试 ， 但 本 书 的 结构 使 得 我 们 只 能 
针对 已 有 代码 编写 测试 。 如 果 你 决定 要 在 开发 中 遵循 TDD， 那 就 务必 在 开发 周 
期 中 的 第 一 步 编写 适当 的 测试 。 
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1. 测试 Express 的 模型 


在 模型 的 测试 中 ， 我 们 将 会 编写 两 个 针对 模型 的 save () 方 法 的 测试 。 为 存放 测试 Mongoose 
Articles 模 型 的 代码 ， 在 app/tests 目 录 中 创建 文件 article.server.model.testjs， 并 为 其 输入 以 下 代码 : 











Var app = require('../../server.js'), 
should = require('should'), 
mongoose = require('mongoose'), 
User = mongoose.model ('User'), 
Article = mongoose.model ('Article'); 


var user, article; 


describe('Article Model Unit Tests:', function() { 
beforeEach(function(done) { 
user = new User({ 

firstName: 'Full', 
lastName: 'Name', 
displayName: 'Full Name', 
email: 'test@test.com', 
username: 'username', 
password: 'password' 


user.save(function() { 
article = new Articlel({ 
title: 'Article Title', 
content: 'Article Content', 
user: user 


descripbe('Testing the save method', function() { 
it('Should be able to save without problems', function() { 


article.save(function(err) { 
should.not .exist (err); 

}); 

基 汉 


it('Should not be able to save an article without a title', function() { 
article.title = ''; 


article.save(function(err) { 
should.exist (err); 

}); 

下 

过 


afterEach (function(daone) { 
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Article.remove (function() { 
User.remove (function() { 
done () ; 
3 
}); 
} 
J 
让 我 们 逐一 分 析 一 下 上 述 代码 。 首 先 ， 对 相关 的 依赖 进行 了 包含 ， 并 定义 了 一 些 全 局 变量 。 
接着 便 开 始 了 一 个 以 aescribe() 方 法 打头 的 测试 ， 用 于 通知 测试 工具 开始 对 Articles 模 块 进 
行 检测 。 在 aescripbe() 语 句 块 内 ， 使 用 peforeEach () 方 法 创建 了 一 个 新 的 user 对 象 和 一 个 新 
的 articles 对 象 。beforeEach () 方 法 用 于 定义 在 每 个 测试 运行 前 都 会 被 执行 一 遍 的 代码 块 。 
当然 也 可 以 用 before () 方 法 ， 但 该 方法 定义 的 代码 块 只 能 在 整个 测试 运行 之 前 执行 一 次 。 请 注 
意 beforeEach () 方 法 是 通过 调用 的 aone () 回调 刺 数 ， 来 通知 测试 框架 可 以 继续 执行 测试 的 。 
这 可 以 保证 在 执行 后 续 测 试 之 前 完成 所 有 的 数据 库 操作 。 


接着 ,又 创建 了 一 个 新 的 describe 语 句 块 ， 用 以 测试 模型 的 save 方 法 。 在 语句 块 内 , 使 用 
it () 方 法 创建 了 两 个 测试 。 第 一 个 测试 直接 使 用 article 对 象 保存 了 一 个 新 的 文档 。 接 着 使 用 
Should.js 断 言 库 来 验证 是 否 出 现 了 错误 。 第 二 个 测试 ， 通 过 向 tit1le 属 性 传人 一 个 非法 的 值 来 检 
查 模 型 的 验证 器 。 这 里 使 用 的 是 Should.js 断 言 库 来 检查 执行 save 方 法 是 否 的 确 出 现 了 错误 。 


最 后 , 使 用 afterEach () 方 法 清理 了 MongoDB 的 Article 集 合 和 User 集 合 。 与 beforeEach () 
方法 类 似 ， 这 段 代 码 会 在 每 个 测试 执行 完成 的 时 候 和 运行 一 次 。 当 然 ， 也 可 以 换 成 after () 方 法 。 
这 段 代 码 中 也 用 相同 方式 调用 了 done ()。 

大 功 告 成 ， 第 一 个 单元 测试 已 经 完成 了 ! 前 面 也 曾 提 到 过 ， 当 需要 处 理 更 为 复杂 的 对 象 时 ， 
可 以 继续 对 上 面 这 段 测 试 代码 进行 扩展 , 以 覆盖 更 多 的 模型 方法 。 下 一 步 来 看 看 如 何 为 控制 器 编 
写 更 为 复杂 的 单元 测试 。 











































































































2. 测试 Express 控 制 器 


在 控制 器 的 测试 示例 中 , 将 会 用 到 两 个 测试 来 检测 控制 器 的 检索 方法 。 在 开始 编写 测试 之 前 ， 
其 实 有 两 个 选择 ,一 是 直接 对 控制 器 的 方法 进行 测试 ， 二 是 在 测试 中 定义 控制 器 的 Express 路 由 。 
虽然 更 优 的 选择 是 两 个 方法 都 分 别 测 试 一 次 , 但 这 里 为 了 简便 , 将 按 第 二 个 方案 来 测试 。 在 开始 
测试 控制 器 之 前 ， 先 在 app/tests 中 创建 文件 articles.server.controller.tests.js， 并 为 其 输入 以 下 代码 : 















































Var app = require('../../server'), 
request = require('supertest'), 
should = require('should'), 
mongoose = require('mongoose'), 

User = mongoose.model ('User'), 
Article = mongoose.model ('Article'); 


var user, article; 
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describe('Articles Controller Unit Tests:', function() { 
beforeEach(function(done) { 
user = new User (1 

firstName: 'Full', 
lastName: 'Name', 
displayName: 'Ful1 Name', 
email: 'test@test.com', 
Username: 'username', 
password: 'password' 


3 


user.save(function() { 
article = new Articlel({ 
tlt1les "MATELTCLS ‘TitLe" ;» 
content: 'Article Content', 
user: user 


下 


article.save(function(err) { 
done () ; 
省 六 
地 
}); 


descripbe('Testing the GET methods', function() { 
it('Should be able to get the list of articles', function(done)t{ 
request (app) .get ('/api/articles/') 
.Set('Accept', 'application/json') 
.expect('Content-Type', /json/) 
.expect (200) 
.end(function(err, res) { 
res.body.should.be.an.Array.and.have.lengthOof (1); 
res.body[0] .should.have.property('title', article.title); 
res.body[0] .should.have.property('content', article.content); 


done(); 
}); 
Fs 


it('Should be able to get the specific article', function(done) { 
request (app) .get ('/api/articles/' + article.id) 

.Set('Accept', 'application/json') 

.expect('Content-Type', /json/) 

.expect (200) 

.end(function(err, res) { 
res.body.should.be.an.Object.and.have.property('title', article.title); 
res.body.should.have.property('content', article.content); 


done(); 
}); 
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afterEach(function(done) { 
Article.remove() .exec (); 
User.remove() .exec (); 
done () ; 
i 
有 


与 前 面 的 模型 测试 类 似 ， 上 述 代码 首先 包含 了 模块 依赖 ， 定 义 了 全 局 变量 。 接 着 便 是 以 
describe() 方 法 开始 的 测试 ， 用 于 通知 测试 工具 开始 对 Articles 控 制 器 进行 测试 。 在 aescribe 语 
句 块 内 ， 先 是 用 beforeEach () 方 法 创建 了 user 和 article 两 个 新 对 象 。 与 模型 测试 不 一 样 的 是 ， 
这 里 是 在 开始 测试 之 前 就 将 文档 保存 到 数据 库 中 了 ， 然 后 调用 aone () 回调 函数 继续 执行 测试 。 


接着 ， 用 一 个 新 的 aescripe 语 句 块 来 声明 将 执行 对 控制 器 GET 方 法 的 测试 。 它 使 用 it () 方 
法 创建 了 两 个 测试 ， 第 一 个 测试 使 用 SuperTest 源 言 库 向 服务 器 端 发 起 了 请 求 articles 列 表 的 HTTP 
GET 请 求 。 测 试 还 检查 了 HTTP 的 响应 变量 ， 包 括 头 部 的 content-type 值 和 HTTP 响 应 状态 码 。 
如 果 响 应 检查 到 响应 返回 是 正常 的 ， 便 用 三 个 Should.js 断 言 表达 式 来 检查 响应 内 容 ， 响 应 内 容 中 
应 该 是 仅 包含 一 个 在 beforeEach ( ) 中 创建 的 文档 的 文档 列表 。 


第 二 个 测试 仍然 是 使 用 SuperTest 向 服务 需 发 起 一 个 HTTP GET 请 求 ， 来 获取 单个 文档 。 测 试 
还 检查 了 HTTP 的 响应 变量 ,包括 头 部 的 content-type 值 和 HTTP 响 应 状态 码 。 如 果 响 应 检查 到 
响应 返回 是 正常 的 ， 便 用 Shouldjs 断 言 表 达 式 来 检查 响应 内 容 ， 响 应 内 容 应 该 是 一 个 在 
beforeEach () 中 创建 的 文档 。 


上 面 几 步 完成 后 , 便 是 使 用 afterEach () 方 法 清理 User 集 合 和 Article 集 合 , 测试 就 执行 完成 
了 。 准 备 好 测试 环境 ， 测 试 代码 也 已 完成 ， 接 下 来 就 是 使 用 Mocha 命 令 行 工具 来 执行 测试 了 。 

















































































































10.2.8 执行 Mocha 测 试 

要 运行 Mocha 测 试 ， 必 须 借助 前 面 安装 的 Mocha 命 令 行 工 具 。 使 用 命令 行 工 具 进 入 项 目 根 文 
件 夹 ， 然 后 运行 如 下 的 命令 : 

$ NODE ENV=test mocha --reporter spec app/tests 

如 果 是 Windows 环 境 ， 则 应 该 执行 如 下 命令 : 

> set NODE ENV=test 

然后 使 用 如 下 命令 来 执行 Mocha 测 试 : 

> mocha --reporter spec app/tests 

上 述 几 个 命令 ， 首 先是 对 系统 环境 变量 NODE_ENV 进 行 了 设置 ， 使 得 MEAN 应 用 使 用 测试 环 
境 配置 文件 。 然 后 执行 了 Mocha 命 令 行 工 具 ,， 并 通过 -reporter 设 置 了 两 个 参数 。 其 中 ,第 一 个 
参数 指定 了 Mocha 将 使 用 spec 生 成 报告 , 另 一 个 参数 指定 了 测试 文件 夹 位 置 。 最 后 的 报告 将 是 一 
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个 与 下 图 类 似 的 结果 。 








四 日 日 32850S_10_01 一 bash 一 80x24 


AmoseAmoss-MacBook-Pro-2;~/Dropbox/Documents/MEAN BookVFD/Chapter 19 - FD/Code/3 
28505_10_! 015 NODE_ENV=test mocha --reporter spec app/tests 
Server running at http://localhost:3000/ 


Article Model Unit Tests: 
Testing the save method 
w Should be able to save without problems 
w Should not be able to save an article without a title 


Article Controller Unit Tests: 
Testing the GET methods 
w Should be able to get the list of articles 
wy ShoulLd be ablLe to get the specific article 


ook-Pro-2:~/Dropbox/Documents/MEAN Book/FD/Chapter 10 - FD/Code/3 


28505_10_01$ 





Mocha 测 试 结果 


这 便 是 Express 应 用 所 覆盖 的 测试 结论 。 上 述 方法 的 扩展 测试 , 可 以 持续 推进 应 用 的 开发 。 本 
书 建议 你 在 开发 的 初始 阶段 就 着 手 进行 测试 ， 否 则 整个 开发 都 可 能 被 测试 拖累 。 接 下 来 将 介绍 
AngularJS 组 件 的 测试 ， 编 写 一 些 E2E 测 试 。 






































10.3 AngularJS 应 用 测试 


一 直 以 来 ,测试 前 端 代码 是 个 麻烦 的 工作 ,本 来 跨 浏览 器 以 及 平台 间 的 测试 就 已 经 够 复杂 了 
加 之 前 端 应 用 的 代码 又 不 够 结构 化 , 测试 工具 主要 进行 的 是 UI 的 E2E 测 试 。 但 是 , 随 着 前 端 MVC 
框架 的 广泛 应 用 ， 社 区 也 开始 创建 一 些 更 强大 的 测试 工具 ， 以 便 开 发 者 除了 能 够 做 E2E 测 试 外 ， 
也 可 以 进行 单元 测试 。 事 实 上 ，AngularJS 团 队 也 从 战略 上 注重 所 开发 功能 的 可 测试 性 。 


此 外 , 分 裂 的 平台 也 产生 了 一 类 专注 测试 执行 的 工具 , 它们 致力 于 帮助 开发 人 员 在 不 同 的 环 
境 和 平台 中 运行 测试 。 本 节 将 重点 介绍 与 AngularJS 测 试 相关 的 工具 和 框架 ， 并 讨论 如 何 利 用 它 
们 更 好 地 编写 和 执行 E2E 测 试 与 单元 测试 。 证 我 们 先 从 经 常会 用 到 的 测试 框架 
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Jasmine 开 始 。 





虽然 AngularJS 应 用 测试 也 可 以 通过 SM 内 的 其 他 测试 框架 完成 ,但 
到 目前 为 止 ，Jasmine 依 然 是 该 应 用 测试 最 简单 及 最 常用 的 测试 框架 。 
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10.3.1 Jasmine 框 架 简介 


Jasmine 是 由 Pivotal 组 织 开 发 的 BDD 范 式 测试 框架 ， 而 且 也 采用 了 与 Mocha 一 样 的 BDD 接 口 ， 
如 aescribe() 、it() 、beforeEach() 和 afterEach () 等 方法 。 但 与 Mocha 不 同 的 是 ，Jasmine 
自 带 了 上 断言 功能 , 可 以 在 expect () 方 法 后 面 链 上 Matchers 的 断言 方法 ， Matchers 的 基本 功能 是 对 
实际 对 象 和 期 望 值 进行 布尔 比较 ， 例如， 下 面 是 一 个 使 用 toBe () 的 简单 例子 : 
































describe('Matchers Example', function() { 
it('Should present the toBe matcher example', function() { 
YAaAr 总 三 3 
VE 和 


expect (a) .toBe (pb); 
expect (a) .not .toBe (null); 
有 
2 
toBe () 方 法 是 用 === 来 进行 比较 。Jasmine 包 含 了 很 多 匹配 方法 ， 还 支持 自 定 义 匹 配方 法 。 
Jasmine 还 包括 很 多 其 他 的 强大 功能 , 可 用 它 来 进行 很 复杂 的 测试 。 下 一 节 将 讨论 如 何 使 用 Jasmine 
来 轻松 地 对 AngularJS 组 件 进 行 测试 。 




















了 解 更 多 关于 Jasmine 功 能 的 相关 信息 ， 请 参阅 官方 文档 ( http://jasmine. 
人 > github.io/2.0/introduction.html. )。 


10.3.2 ”AngularJS 单 元 测试 


在 以 前 , 开发 人 员 若 想 要 为 前 端 代码 编写 单元 测试 , 就 不 得 不 在 测试 范围 和 适当 的 组 织 测试 
集 之 间 不 断 权 衡 。 但 AngularJS 固 有 的 关注 点 分 离 ， 迫 使 开发 人 员 编写 独立 的 模块 代码 ， 这 反倒 
使 单元 测试 更 简单 了 。 开 发 人 员 可 以 迅速 地 识别 哪些 部 分 是 需要 测试 的 ， 像 AngularJS 的 控制 器 、 
服务 、 指 令 等 组 件 ， 都 可 以 当 作 独立 的 部 分 来 测试 。 此 外 ，AngularJS 中 广泛 使 用 的 依赖 注入， 
也 使 得 开发 人 员 可 以 借助 大 量 的 测试 集 来 切换 上 下 文 环 境 。 在 开始 编写 AngularJS 的 测试 之 前 ， 
先 要 准备 一 下 测试 环境 。 下 面 来 认识 一 下 测试 执行 工具 Karma。 


















































1. Karma 简 介 


Karma 是 由 AngularJS 团 队 开发 的 测试 执行 过 程 管理 实用 工具 , 用 以 帮助 开发 人 员 在 不 同 的 浏 
览 器 中 执行 测试 。Karma 会 开启 一 个 Web 服 务 器 , 并 在 选择 的 浏览 器 中 执行 被 测 代码 和 测试 代码 ， 
然后 将 测试 结果 显示 到 命令 行 工 具 中 。Karma 还 支持 使 用 真实 设备 和 浏览 器 进行 测试 ， 并 提供 相 
应 的 测试 结果 ， 支 持 通 过 流程 控制 IDE 和 命令 行 ， 还 支持 各 种 框架 的 测试 。 当 然 ，Karma 也 支持 
各 类 插件 ， 使 得 开发 人 员 能 够 使 用 各 种 流行 的 测试 框架 。AngularJS 团 队 还 提供 了 名 为 浏览 器 启 
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动 器 的 捅 件 ， 以 便 在 开发 人 员 选 择 的 浏览 顺 中 测试 。 


在 示例 程序 中 ,将 选用 Jasmine 作 为 测试 框架 ，PhantomJS 作 为 浏览 絮 启 动 嚣 。 当 然 ， 在 实际 
的 应 用 测试 中 ， 可 以 对 Karma 的 配置 进行 修改 ， 在 开发 人 员 计 划 支 持 的 浏览 右上 进行 测试 。 











2 PhantomJS 是 一 个 非 主流 的 Webkit 浏 览 器 ， 主 要 用 于 不 需要 显示 输出 的 开发 
环境 中 ， 因 此 它 非常 适合 在 测试 中 使 用 。 可 通过 访问 官方 文档 ( http://phantomjs. 
org/documentation/ ) 对 其 做 进一步 了 解 。 


Ea 


2. 安装 Karma 命 令 行 工具 

要 想 使 用 Karma 命 令 行 工具 ， 最 简单 的 办 法 是 使 用 npm 以 全 局 方式 进行 安装 ， 执 行 下 面 的 命 
令 即 可 完成 : 

$ npm install -g karma-cli 


这 便 可 以 将 最 新 版 本 的 Karma 命 令 行 工具 安装 到 系统 全 局 的 node_modules 目 录 中 。 安 装 完成 
后 ， 就 可 以 在 命令 行 中 使 用 Karma 工 具 。 接 着 要 安装 的 是 Karma 的 项 目 依 赖 模块 。 

















若 执行 全 局 模块 安装 命令 时 发 生 错误 ， 通 常 都 是 因为 权限 问题 ， 使 用 sudo 
~ 一。 或 者 超级 用 户 运行 安装 命令 即 可 。 


3. 安装 Karma 的 依赖 


可 以 通过 修改 package.json 来 运用 npm 安 装 Karma 的 依赖 ， 修 改 package.json 如 下 : 








{ 

"name": "MEAN", 

Myersion. "0,0.10"; 

"dependencies": { 
"express": "~4.8.8", 
Wm 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
全 有 下 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
"Sassportre. T0222, 
"Dassport=local™, Wola0.0"s 
"passport-facebook": "~1.0.3", 
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"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
"socket .io": "~1.1.0", 
"connect-mongo": "~0.4.1"， 
"Cookie-parser": "~1.3.3" 

} 

"devDependencies": { 
SHGULd rs Tedd 
"supertest": "~0.13.0", 
"karma": "~0.12.23", 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4" 

} 

} 


上 上 面 在 devDependencies 中 添加 了 Karma 的 核心 模块 ，Karma 的 Jasmine 插 件 模块 和 Karma 
的 PhantomJS 启 动 器 模块 。 使 用 命令 行 工 具 进 入 应 用 的 根 目 录 ， 然 后 执行 如 下 的 命令 : 








$ npm install 


相应 0 Karma 的 Jasmine 插 件 和 PhantomJS 启 动 器 便 可 安装 到 应 用 的 node_modules 
文件 夹 中 了 。 安 装 完成 后 , 便 可 以 利用 这 些 模块 来 运行 测试 。 下 一 步 将 先 来 添加 用 于 配置 Karma 
执行 i 


4. Karma 的 配置 


为 了 能 够 控制 Karma 的 测试 执行 ， 需 要 在 应 用 的 根 目录 中 创建 Karma 专 用 的 配置 文件 。 测 试 
执行 时 ，Karma 会 会 完 在 应 用 的 根 目录 中 查找 名 为 karma .conf .js 的 配置 文件 ， 当然, 这 个 配置 文 
件 名 是 可 以 使 用 命令 行 的 参数 来 自 定义 的 。 为 了 简便 ,在 这 里 还 是 使 用 它 默认 的 配置 文件 名 。 进 
入 应 用 根 目录 ， 创建 名 为 karma .conf .js 的 文件 ， 其 代码 如 下 : 



































module.exports = function(config) { 
config.set(t{ 
frameworks: ['jasmine'], 
files: [ 
'public/lib/angular/angular.js', 
'public/lib/angular-resource/angular-resource.js', 
'public/lib/angular-route/angular-route.js', 
'public/lib/angular-mocks/angular-mocks.js', 
'public/application.js', 
"BubDLic/* [IIIB] */* 82 
"Bublic/*[!1]ib]*/*[!tests]*/*.js’" 
"ubLie/s lLriB]*/ estes/ nit/ je 
]- 
reporters: ['progress'], 
browsers: ['PhantomJS'], 
captureTimeout: 60000, 
singleRun: true 
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Karma 的 配置 文件 用 于 设置 其 测试 执行 ， 上 面 的 代码 中 用 到 了 下 面 几 个 设置 。 


口 frameworks: 告诉 Karma 使 用 的 Jasmine 测 试 框 架 。 

D files: 用 于 设置 测试 中 需要 包含 的 文件 列表 ,可 以 使 用 shell 中 的 通配符 来 匹配 文件 ， 上 
述 代 码 中 包含 了 JavaScript 库 文件 和 模块 文件 ， 但 排除 了 用 于 测试 的 文件 。 

口 reporters: 设置 Karma 生 成 测试 结果 报告 的 方式 。 

D prowsers: 设置 Karma 执 行 测试 的 浏览 器 列表 , 但 在 这 里 ， 因 为 只 安装 了 PhantomJS 的 启 
动 器 ， 因 此 只 能 使 用 PhantomJS 。 

口 captureTimeout: 设置 Karma 的 测试 超时 时 间 。 

D singleRun: 设置 测试 执行 完毕 后 退出 Karma。 


上 面 的 配置 都 是 针对 单个 项 目的 , 当 测 试 需求 变化 时 , 配置 也 需要 随 之 修改 。 在 实际 测试 中 ， 
就 需要 在 更 多 的 浏览 带 中 执行 。 


| 可 通过 访问 官方 文档 ( http://karma-runner.github.io/0.12/config/configuration- | 
~ file 
































.html ) 对 Karma 的 详细 配置 进行 了 解 。 


5. 模拟 AngularJS 组 件 


在 进行 AngularJS 应 用 测试 时 ， 建 议 与 后 端 服务 器 分 开 ， 以 便 快 速 执行 单元 测试 ， 这 样 做 一 
是 为 了 保证 测试 的 独立 性 , 二 是 让 测试 以 同步 的 方式 执行 。 这 意味 着 需要 控制 依赖 的 注入 ,利用 
假 的 组 件 来 模拟 真实 的 组 件 操作 。 比 如 ,大 多 数 的 组 件 都 会 使 用 shttp 服 务 ， 或 者 其 他 更 加 抽象 
的 像 $Sresource 这 样 的 服务 与 后 端 进行 通信 。 此 外 ，s$http 服 务 还 会 使 用 $shttpBackend 服 务 向 
后 端 服务 器 发 起 请 求 ， 这 意味 着 还 要 注入 一 个 模拟 的 shttpBackend 服 务 , 来 发 起 并 不 会 直接 到 
达 服 务 器 的 假 HTTP 请 求 。 一 贯 致力 于 测试 的 AngularJS 团 队 早已 专门 为 此 编写 了 相应 的 工具 一 一 
封装 了 多 个 模拟 组 件 的 ngMock。 















































(1) ngMock 简 介 

ngMock 是 由 AngularJS 团 队 开发 的 扩展 模块 。 它 包含 了 多 个 用 于 测试 的 AngularJS 模 拟 工 具 。 
ngMock 模 块 提供 给 开发 人 员 多 个 重要 的 模拟 方法 和 多 个 模拟 服务 , 其 中 有 两 个 比较 常用 的 方法 ， 
一 个 是 用 于 创建 模拟 模块 实例 的 angular .mock.module() 方 法 , 另 一 个 是 用 于 注入 模拟 的 依赖 
的 angular.mock.inject () 方 法 ,为 了 便于 使 用 ,这 些 方法 也 都 绑 定 到 了 window 这 个 对 象 上 。 

ngMock 模 块 还 提供 了 一 些 模拟 服务 ， 比 如 模拟 异常 服务 、 超 时 服务 和 日 志 服 务 等 。 在 示例 
中 将 会 用 ShttpBackend 模 拟 服务 来 处 理 测试 中 的 HTTP 请 求 。 


$httpBackend 可 以 用 来 模拟 响应 HTTP 请 求 。 它 提供 了 两 个 方法 用 于 设置 模拟 的 后 端 返回 
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的 数据 。 其 中 之 一 的 Shttp.backEnd.expect () 方 法 , 可 以 对 应 用 发 起 的 HTTP 请 求 进行 断言 判 
断 ， 如 果 请 求 不 是 由 测试 发 起 ， 或 者 请 求 的 顺序 有 误 ， 则 返回 失败 。 该 方法 限于 单元 测试 使 用 。 
用 法 如 下 : 


ShttpBackend.expect('GET'，'/usetr') .respond({userId: 'userx'}); 


这 便 可 以 强制 给 AngularJS 中 的 Shttp 请 求 返回 一 个 模拟 的 响应 ,但 若 请 求 不 能 满足 断言 表达 
式 则 返回 失败 。 第 二 个 方法 ShttpBackend.when() 则 可 用 于 针对 请 求 模拟 一 个 后 端 返回 ,不 做 
任何 断言 判断 ， 用 法 如 下 : 


shttpBackend.when('GET', '/user') .respond({userId: 'userXx'}); 


这 只 是 给 shttp 服 务 发 起 的 请 求 简单 地 返回 一 个 定义 好 的 响应 而 已 ， 不 会 对 HTTP 请 求 进行 
断言 检查 。 在 真正 使 用 ngMock 之 前 ， 需 要 先 安装 。 





























(2) 安装 ngMock 
可 通过 bower 来 安装 ngMock， 修 改 bower.json 如 下 : 


"name": "MEAN", 

vereion i “TOO0L0w, 

"dependencies": { 
TNLarTs Mw] 2 
"angular-route": "~1.2", 
"angular-resource": "~1.2", 
"angular-mocks": "~1.2" 

} 

} 


使 用 命令 行 工 具 进 入 MEAN 应 用 的 根 目录 ， 执 行 如 下 命令 来 安装 新 的 依赖 模块 : 





$ bower update 


安装 完 新 的 依赖 后 ， 便 可 以 在 public/lib 中 看 到 一 个 名 为 angular-mocks 的 新 文件 夹 。 实 际 上 在 
前 面 Karma 配 置 文件 中 的 files 项 中 ， 就 已 经 包含 了 ngMock 模 块 的 JavaScript 文 件 。 安 装 完成 了 ， 
接 下 来 便 可 以 开始 编写 AngularJS 的 单元 测试 代码 。 








6. 编写 AngularJS 单 元 测试 


前 面 已 经 完成 了 相关 环境 的 配置 ， 实 际 编写 测试 代码 其 实 是 比较 简单 的 。 使 用 ngMock 提 供 
的 工具 ， 便 可 轻松 完成 对 AngularJS 组 件 的 测试 。 测 试 代 码 的 大 概 结构 都 差不多 ， 只 有 一 些微 小 
的 变化 。 在 本 小 节 中 ， 将 会 讨论 如 何 对 AngularJS 的 几 个 主要 实体 进行 测试 。 证 我 们 先 从 测试 模 
块 开 始 。 
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(1) 模块 测试 
模块 测试 是 非常 简单 的 ， 只 需要 检查 模块 的 定义 是 否 正确 ， 它 在 测试 环境 中 是 否 存在 即 可 。 
下 面 便 是 一 个 对 模块 的 单元 测试 代码 : 


describe('Testing MEAN Main Module', function() { 
Var mainModule; 





beforeEach (function() { 
mainModule = angular.module('mean'); 


ps 


it('Should be registered', function() { 
expect (mainModule) .toBeDefined(); 
} 
}) 


上 面 的 代 码 使 用 了 beforeEach () 方 法， 这 样 便 可 以 在 测 试 执 行 之 前 使 用 angular. 
module () 方 法 来 加 载 模块 。 测 试 在 执行 时 ， 会 使 用 Jasmine 的 匹配 器 来 验证 是 否 已 经 成 功 地 定义 
了 模块 。 

(2) 控制 器 测试 


相对 于 模块 的 测试 , 控制 器 的 测试 要 稍为 麻烦 一 些 ,， 需要 借助 ngMock 的 inject () 方 法 来 创 
建 一 个 控制 器 实例 ， 下 面 是 针对 Articlescontroller 进 行 单元 测试 的 代码 : 














descripbe('Testing Articles Controller', function() { 
Var _scope, ArticlesController; 


beforeEach(function() { 
module('mean'); 


inject (function($rootScope, S$controller) { 
_scope = S$rootScope.s$new(); 
ArticlesController = $controller('ArticlesController', { 
$scope: _scope 
}); 
}); 
1 


it('Should be registered', function() { 
expect (ArticlesController) .toBeDefined(); 


}); 


it('Should include CRUD methods', function() { 
expect (_scope.find) .toBeDefined(); 


expect (_scope.findOne) .toBeDefined(); 
expect (_scope.create) .toBeDefined(); 
expect (_scope.delete) .toBeDefined(); 
expect (_scope.update) .toBeDefined(); 


2 
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这 里 再 次 使 用 了 beforeEach() 方 法 ， 以 便 在 测试 执行 之 前 创建 控制 器 。 先 是 用 module () 
方法 注册 主 应 用 模块 ， 用 inject () 方 法 注入 Angular 的 Scontroller 服 务 和 $rootscope 服 务 。 
接着 ,使 用 $rootscope 服 务 创建 了 一 个 新 的 scope 对 象 ， 并 用 $controller 服 务 创建 了 一 个 新 
的 Articlescontroller 实 例 。 新 的 控制 器 实例 会 用 到 模拟 的 _scope 对 象 ， 因 此 可 以 用 它 来 验 
证 控制 器 的 各 个 属性 是 否 存在 。 在 这 个 例子 中 , 主要 是 用 于 检查 控制 器 的 增删 改 查 方法 是 否 存在 。 


(3) 服务 测试 


相对 于 控制 器 的 测试 ， 服 务 的 测试 要 简单 得 多 。 只 需要 把 它 直 接 注入 测试 中 即 可 。 下 面 是 
Articles 服 务 的 单元 测试 代码 : 















































describe('Testing Articles Service', function() { 
Var _Articles; 


beforeEach (function() { 
module('mean'); 


inject (function(Articles) { 
_Articles = Articles; 
} 
} 


it('Should be registered', function() { 
expect (_Articles) .toBeDefined(); 


}); 


it('Should include Sresource methods', function() { 
expect (_Articles.get) .toBeDefined(); 
expect (_Articles.query) .toBeDefined(); 
expect (_Articles.remove) .toBeDefined(); 
expect (_Articles.update) .toBeDefined(); 
a 
}); 


利用 beforeEach() 方 法 ， 即 可 在 测试 执行 之 前 注 和 人 服务, 然后 利用 验证 带 来 检查 服务 是 否 
存在 ， 并 确认 服务 是 否 包 含 Sresource 的 一 系列 方法 。 
(4) 路 由 测试 


测试 路 由 也 很 简单 ， 只 需要 注入 路 由 服务 ， 青 测试 路 径 集 合 。 下 面 的 代码 便 是 Articles 的 
路 由 的 单元 测试 代码 : 


describe('Testing Articles Routing', function() { 
beforeEach (module('mean')); 


it('Should map a "list" route', function() { 
inject (function($route) { 
expect (Sroute.routes['/articles'] .templateUr]l). 
toEqual ('articles/views/list-articles.view.html'); 
Fe 
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地 
1 


这 里 只 是 测试 了 其 中 一 个 路 由 的 templateUr1 属 性 ， 实 际 测试 大 都 要 比 这 多 得 多 。 








尽管 前 端的 内 容 中 没有 详细 讨论 指令 ， 但 它 的 确 是 AngularJS 应 用 中 很 重要 的 一 部 分 。 测 试 
指令 时 ， 一 般 需要 提供 一 个 HTML 模 板 ， 并 用 到 Angular 的 scompile 服 务 。 下 面 是 针对 ngBina 
指令 的 一 个 单元 测试 : 


descripbe('Testing The ngBind Directive', function() { 
beforeEach (module('mean')); 





it('Should bind a value to an HTML element', function() { 
inject (function($rootScope, S$compile) { 
Var _scope = S$rootScope. snew(); 
element = $compile('<div data-ng-bind="testValue"></div>')(_ scope); 


_scope.testValue = 'Hello World'; 
_scope.s$digest(); 


expect (element .html()) .toEqual(_scope.testValue); 
下 
A 
3 
上 面 的 代码 中 , 首先 是 创建 了 一 个 新 的 scope 对 象 , 接着 通过 $complie 服 务 借助 scope 对 象 来 
编译 HTML 模板 。 然 后 设置 了 scope 模 型 的 testvalue 属 性 ， 并 使 用 saigest () 方 法 将 模型 值 绑 
定 到 指令 中 。 最 后 ， 验 证 了 模型 的 值 是 否 的 确 被 填充 到 了 HTML 中 。 


(6) 过 滤器 测试 


前 面 的 内 容 没 有 详细 介绍 过 滤器 ， 但 它 也 是 AngularJS 应 用 的 重要 组 成 部 分 。 测 试 过 滤器 与 
测试 其 他 AngularJS 组 件 一 样 简单 。 下 面 是 针对 Angular 的 lowercase 过 滤 右 的 单元 测试 代码 : 


descripbe('Testing The Lowercase Filter', function() { 
beforeEach (module('mean')); 

































































it('Should convert a string characters to lowercase', function() { 
inject (function($filter) { 
Var input = 'Hello World'; 
Var toLowercaseFilter = $filter('lowercase'); 


expect (toLowercaseFilter (input)).toEgqual (input.toLowerCase()); 
Fs 
区 区 
均 党 


上 面 的 代码 中 , 用 到 了 $filter 服 务 , 它 可 以 创建 一 个 过 滤器 的 实例 。 接 着 便 可 以 通过 输入 
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值 来 验证 过 滤器 的 功能 了 。 这 里 直接 借助 JavaScript 的 toLowercase () 方 法 来 验证 1owercase 过 
滤器 的 功能 是 否 正 常 。 


上 述 例子 已 经 很 直观 地 介绍 了 如 何 编 写 基 础 的 AngularJS 单 元 测试 。 当 然 ， 实 际 的 测试 要 比 
这 复杂 得 多 ， 下 面 来 看 看 如 何 使 用 ngMock 对 控制 器 ArticlesController 的 一 个 方法 进行 单元 
测试 。 

7. 编写 单元 测试 

测试 控制 器 的 方法 是 经 常会 碰 到 的 一 个 需求 。 控 制 器 Articlescontroller 的 方法 都 是 利 
用 $shttp 服 务 与 后 端 服务 器 通信 的 ， 因 此 需要 适当 地 用 到 $shttpBackend 模 拟 服务 。 为 了 组 织 
ArticlesCcontroller 控 制 器 的 单元 测试 , 进入 public/articles 文 件 夹 , 创建 名 为 tests 的 子 文件 夹 ， 
在 子 文件 夹 中 ， 再 创建 一 个 名 为 unit 的 目录 ， 专 门 存放 单元 测试 的 代码 。 然 后 在 public/articles/ 
tests/unit 中 创建 文件 articles.client.controller.unit.tests.js， 其 代码 如 下 : 











describe('Testing Articles Controller', function() { 
Var _scope, ArticlesController; 


beforeEach (function() { 
module('mean'); 


jasmine.addMatchers ({ 
toEqualData: function(util, customEqualityTesters) { 


return { 
compare: function(actual, expected) { 
return { 


pass: angular.equals (actual, expected) 


}); 
inject (function($rootScope, S$controller) { 
_Scope = SrootScope.Snew() ; 
ArticlesController = $controller('ArticlesController', { 
Sscope: _scope 


it('Should have a find method that uses S$resource to retrieve a list of articles'， 
inject (function(Articles) { 
inject (function($httpBackend) { 

Var sampleArticle = new Articles({ 
title: 'An Article about MEAN', 
content: 'MEAN rocks!' 

让 

var sampleArticles = [sampleArticlel]; 


$shttpBackend .expectGET('api/articles') .respond(sampleArticles); 
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_scope.find(); 
$httpBackend.flush(); 


expect (_scope.articles) .toEqualData(sampleArticles); 
站 
已 局 记 : 


it('Should have a findone method that uses Sresource to retreive a single of article'， 
inject (function(Articles) { 
inject (function($httpBackend, SrouteParams) { 
Var sampleArticle = new Articles({ 
title: 'An Article about MEAN', 
content: 'MEAN rocks!' 
Fs 


SrouteParams .articleId = 'abcdef123456789012345678'; 


$shttpBackend .expectGET(/api\/articles\/([0-9a-fA-F] {24})$/). 
respond (sampleArticle); 


_scope.findone(); 
$shttpBackend.flush(); 


expect (_scope.article) .toEqualData(sampleArticle); 
的 这 
3 
}) 
上 述 代码 可 以 分 为 几 个 部 分 ， 首 先是 包含 了 依赖 模块 ， 并 定义 了 几 个 全 局 变量 。 使 用 
descripe() 方 法 开始 了 测试 ， 以 通知 测试 工具 开始 对 Articlescontroller 进 行 检测 。 在 
describe 语 句 块 中 ， 先 是 使 用 peforeEach () 方 法 创建 了 新 的 控制 器 和 scope 对 象 。 


另外 还 在 beforeEach () 方 法 中 创建 了 一 个 叫 togdqualDpata 的 Jasmine 匹 配器 ， 该 匹配 器 会 
用 angular .equal () 方 法 对 普通 对 象 和 sresource () 封 装 的 对 象 进行 比 较 。 添 加 这 个 匹配 需 的 
原因 在 于 ，sresource 会 在 对 象 中 增加 一 些 属性 ， 因 此 普通 的 对 比 是 检查 不 了 的 。 


接着 创建 了 首 个 指标 ， 用 以 测试 控制 器 的 fina() 方 法 。 这 里 巧妙 地 使 用 $httpBackenad . 
expectGET () 方 法 设置 了 一 个 新 的 后 端 请 求 断言 。 只 要 测试 发 起 的 HTTP 请 求 满足 断言 ， 就 会 返 
回 给 定 的 响应 。 然 后 使 用 了 控制 器 的 fina() 方 法 创建 了 一 个 挂 起 的 HTTP 请求， 在 调用 了 
ShttpBackend.flush() 方 法 后 ， 便 会 模仿 出 来 一 个 来 自 服务 器 的 响应 。 最 后 使 用 模型 的 值 检 
查 来 结束 测试 。 


第 二 个 指标 与 第 一 个 基本 一 致 , 但 测试 的 是 控制 需 的 findone () 方 法 。 在 调用 $shttpBackend 
服务 时 ,也 用 到 了 srouteParams 服 务 设置 路 由 参数 articleIda。 单元 测试 便 完 成 了 ， 下 面 来 看 看 
如 何 使 用 Karma 的 命令 行 工 具 来 执行 测试 。 
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8. 执行 AngularJS 单 元 测试 


AngularJS 测 试 的 执行 ,需要 用 到 前 面 安 装 的 Karma 命 令 行 工 具 。 使 用 命令 行 工具 进入 应 用 的 
根 目 录 ， 然 后 执行 如 下 的 命令 : 


$ NODE ENV=test karma start 


但 如 果 是 在 Windows 环 境 中 ， 则 需要 先 执行 如 下 命令 : 





























> set NODE ENV=test 
再 用 如 下 命令 来 执行 Karma: 


> karma start 


上 面 的 命令 中 ， 先 是 设置 了 环境 谈 量 ， 计 MEAN 能 够 使 用 测试 环境 配置 文件 。 然 后 执行 了 
Karma 的 命令 行 工 具 。 测 试 结果 会 显示 到 命令 行 窗 口中 ， 与 下 图 类 似 。 



































) A 32850S_09_01 一 bash 一 80x24 


Amoss- MacB k-Pro:32850S_09_01 Amos$ NODE_ENV=test karma start 
KO : Karma vO.12.16 server started at http://localhost:9876/ 
Starting browser Phantom]S 
5 1.9.7 (Mac 05 X)]: Connected on socket 2g0riozWZDbDKtIrIRp3 with 


id 2822018 
Phantom]S 1,9.7 (Mac 05 X):; Executed 2 of 2 SUCCESS (0.002 secs / 0,015 secs) 
Amoss-MacBook-Pro:328505_09_01 Amos$ 





Karma 的 测试 执行 结果 


该 结果 便 是 MEAN 应 用 单元 测试 覆盖 的 最 终结 论 。 你 可 以 使 用 这 些 方法 来 扩展 测试 集 ， 以 对 
AngularJS 的 更 多 组 件 进行 测试 。 下 一 节 将 讨论 AngularJS 的 E2E 测 试 ,并 编写 和 执行 跨 平 台 的 E2E 
测试 。 















































10.3.3 AngularJS E2E 测 试 


单元 测试 是 对 应 用 进行 第 一 个 层次 的 测试 覆盖 , 但 有 时 候 需 要 编写 在 某 一 个 界面 中 将 多 个 组 
件 组 合 在 一 起 的 测试 。AngularJS 团 队 将 此 称 为 E2E 测 试 。 0 


下 面 用 例子 来 解释 一 下 。Bob 是 一 个 优秀 的 前 端 开 发 人 员 , 他 写 的 AngularJS 代 码 是 经 过 测试 
验证 的 。Alice 是 一 个 不 错 的 后 端 开 发 人 员 ， 并 对 自己 编写 的 Express 控 制 器 和 模型 也 都 进行 了 测 
试 。 理论 上 , 他 们 两 个 人 的 工作 都 做 得 不 错 , 但 当 他 们 把 整个 MEAN 应 用 的 登录 功能 组 合 在 一 起 
的 时 候 ， 却 发 生 了 一 个 错误 ， 深入 排 错 之 后 ， 发 现 Bob 代 码 里 发 送 给 后 端的 JSON 对 象 ， 其 实 和 
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Alice 的 后 端 控制 器 所 期 望 的 对 象 有 点 不 一 样 。 虽然 说 他 们 两 个 都 没什么 错误 , 但 最 终 的 结果 就 是 
不 合格 。 表 面 看 来 ,这 完全 是 项 目 经 理 的 失策 , 但 不 管 怎么 样 , 事情 已 经 发 生 了 。 这 还 只 是 一 个 
简单 的 项 目 ， 现 如 今 的 应 用 都 要 比 这 复杂 得 多 。 这 表明 , 单 靠 一 个 普通 的 测试 ， 或 者 是 单元 测试 
是 行 不 通 的 。 我 们 需要 的 是 一 种 能 够 测试 整个 应 用 的 方法 ， 这 便 是 E2E 测 试 ， 也 是 它 如 此 重要 的 
























































1. Protractor 简 介 


要 想 执行 E2E 测 试 ， 就 必须 要 有 各 种 工具 来 模拟 用 户 的 行为 。AngularJS 团 队 曾经 倡导 
AngularJS 情 景 测试 执行 过 程 管理 工具 ， 后 来 放弃 了 这 一 工具 ， 推 出 了 名 为 Protractor 的 测试 执行 
过 程 管 理工 具 。Protractor 是 一 个 专门 的 E2E 测 试 工具 ， 可 以 模拟 人 的 交互 , 使 用 Jasmine 测 试 框架 
来 执行 测试 。 实 际 上 ，Protractor 是 一 个 Node.js 工 具 ， 使 用 灵巧 的 WebDriver 库 。WebDriver 是 一 个 
开源 工具 , 支持 对 Web 浏 览 需 行为 进行 可 编程 的 控制 。Protractor 默 认 使 用 Jasmine,， 因 此 编写 测试 
的 时 候 ， 和 前 面 的 单元 测试 很 像 ， 此 外 ，Protractor 还 提供 了 如 下 几 个 全 局 对 象 。 


口 prowser: 是 对 WebDriver 实 例 的 封装 ， 通 过 它 便 可 与 浏览 器 进行 通信 。 

口 element: 辅助 功能 ， 用 于 操作 HTML 元 素 。 

口 by: 元 素 定 位 函数 的 集合 ， 借 助 它 可 以 通过 CSS 选 择 器 、 了 D 或 者 其 他 绑 定 的 模型 属 | 
查找 元 素 。 

口 brotractor: 对 WebDriver 命 名 空间 的 封装 ， 包 括 一 系列 静态 类 和 变量 。 


通过 这 些 工 具 ， 便 可 以 直接 在 测试 指标 中 处理 浏览 器 的 操作 。 比 如 ， 使 用 browser .get () 
便 可 以 加 载 页 面 ， 并 对 测试 开始 处 理 。 但 要 注意 的 是 ，Protractor 是 AngularJS 应 用 的 专门 测试 工 
具 ， 因 此 如 果 使 用 browser .get () 加载 的 页 面 不 包含 AngularJS 库 的 话 ， 是 会 报错 的 。 下 面 我 们 
先 来 学 习 安 装 Protractor。 
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Protractor 还 是 一 个 刚 诞 生 不 久 的 工具 , 因此 版 本 变化 会 很 迅速 。 你 可 以 通过 
~ 一 访问 Protractor 官 网 (https://github.com/angular/protractor ) 进一步 了 解 。 
2. Protractor 安 装 


Protractor 是 一 个 命令 行 工具 ， 需 要 使 用 npm 以 全 局 的 方式 安装 。 在 命令 行 工 具 中 执行 如 下 的 
八 - 人 
妆 : 





如 


$ npm install -g protractor 


最 新 版 的 Protractor 便 会 安装 到 系统 的 node_modules 目 录 中 。 安 装 完成 之 后 , 便 可 以 在 命令 行 
中 使 用 Protractor。 
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若 执 行 全 局 模块 安装 命令 时 发 生 错 误 ， 通 常 都 是 因为 权限 问题 ， 使 用 sudo 
~ 或 者 超级 用 户 运行 安装 命令 即 可 。 


由 于 Protractor 需 要 运行 一 个 WebDriver 服 务 器 ， 因 此 在 这 里 需要 运行 一 个 Selenium 服 务 器 ， 
或 者 安装 一 个 独立 的 WebDriver 服 务 器 。 通 过 执行 下 面 的 命令 ， 便 可 以 下 载 和 安装 一 个 独立 的 
WebDriver 服 务 器 : 


$ webdriver-manager update 


这 便 可 以 安装 一 个 Selenium 独 立 服 务 器 ， 后 面 会 用 它 来 处 理 Protractor 测 试 。 下 一 步 便 要 配置 
Protractor 的 执行 选项 。 








可 以 通过 访问 WebDriver 的 官网 ( https://code.google.com/p/selenium/wiki/ 
一 WebDriverJs ) 进一步 了 解 。 


3. Protractor 配 置 


为 了 控制 Protractor 测 试 的 执行 , 需要 在 应 用 的 根 目录 中 创建 Protractor 的 配置 文件 。 在 执行 的 
时 候 ，Protractor 会 自动 在 应 用 根 目 录 中 查找 名 为 protractorconfjs 的 配置 文件 。 当 然 ， 该 配置 文件 
名 是 可 以 使 用 命令 行 的 参数 来 自 定义 的 。 为 了 简便 , 在 这 里 还 是 使 用 它 默认 的 配置 文件 名 。 进 入 
应 用 根 目 录 ， 创 建 名 为 protractorconfjs 的 新 文件 ， 并 为 其 输入 如 下 代码 : 





























exports.config = { 
specs: ['public/*[!1ib]*/tests/e2e/*.js'] 
} 


这 里 的 配置 文件 非常 简单 ， 只 包含 一 个 specs 勇 性 。 该 属性 用 3 告诉 Protractor 测 试 文件 的 存 
放 位 置 。 配 置 文件 是 针对 项 目 本 身 的 ， 因此 需要 根据 需求 来 修改 。 例如, 很 有 可 能 需要 修改 测试 
将 要 运行 的 浏览 器 列 表 。 





























了 解 更 多 关于 Protractor 配 置 的 相关 信息 ， 请 参阅 Protractor 示 例 配 置 文件 
~ ( https://github.com/angular/protractor/blob/master/docs/referenceConf.js )。 


4. 编写 E2E 测 试 


E2E 测 试 无 论 是 编写 还 是 阅读 ， 都 比较 复杂 ， 因 此 先 从 一 个 简单 的 例子 开始 。 例 如 ， 需 要 测 
试 创建 Article 页 面 ， 并 尝试 创建 一 个 新 的 Article。 但 由 于 没有 事先 登录 ， 肯 定 会 收 到 一 个 错误 。 
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下 面 来 实现 一 个 这 样 的 测试 。 进 入 public/articles/tests, 创建 一 个 名 为 e2e 的 子 文件 夹 , 在 新 建 的 文 
件 夹 中 ， 创 建 一 个 名 为 articles.client.e2e.tests.js 的 新 文件 ， 其 代码 如 下 : 





describe('Articles E2E Tests:', function() { 
describe('New Article Page', function() { 
it('Should not be able to create a new article', function() { 
browser.get ('http://localhost:3000/#!/articles/create'); 
element (by.css('input[type=submit]')).click(); 
element (by.binding('error')) .getText () .then(function(errorText) { 
expect (errorText) .toBe('User is not logged in'); 
])s 
于 
下 
让 
我 们 已 经 很 熟悉 这 类 测试 代码 的 结构 了 , 但 测试 本 身 还 是 与 前 面 的 有 很 大 的 不 同 。 上面 这 段 
代码 首先 使 用 prowser .get () 方 法 请 求 到 了 创建 Article 页 面 。 接着 使 用 element () 和 by .css () 
来 提交 表单 。 最 后 使 用 by .binding () 方 法 查找 绑 定 了 错误 消息 的 HTML 元 素 ， 并 验证 错误 消息 
的 内 容 。 虽 然 例 子 比较 简单 ， 但 比较 清楚 地 说 明了 E2E 测 试 的 运行 机 制 。 下 一 步 将 使 用 Protractor 
来 执行 这 个 测试 。 
5. 执行 E2E 测 试 


运行 Protractor 与 前 面 的 Karma 和 Mocha 是 不 一 样 的 Protractor 需 要 MEAN 应 用 实际 运行 起 来 ， 
这 样 才能 像 真 实 的 用 户 那样 进行 访问 。 先 来 启动 应 用 , 使 用 命令 行 工 具 进入 应 用 的 根 目录 , 然后 
执行 如 下 命令 : 

$ NODE_ENV=test node server 

如 果 是 Windows 环 境 ， 则 需要 先 执 行 如 下 命令 : 

> set NODE ENV=test 


接着 再 运行 应 用 : 












































> node server 

这 便 可 以 使 用 测试 环境 配置 文件 运行 MEAN 应 用 。 然后 打开 一 个 新 的 命令 行 窗口 ,进入 应 用 
的 根 目 录 ， 使 用 如 下 的 命令 来 启动 Protractor 测 试 执行 过 程 管理 工具 : 

$ protractor 

Protractor 便 开始 执行 测试 了 ， 最 后 会 把 测试 报告 打印 到 命令 行 窗口 中 ， 其 输入 结果 与 下 图 


类 似 。 
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bash java node he | 


Amoss-MacBook-Pro:32850S_09_01 Amos$ protractor 

Starting selenium standalone server,... 

[launcher] Running 1 instances of WebDriverSelenium standalone server started at 
http://192.168.1.104:64433/wd/hub 


Finished in 1.346 seconds 


1 test, 1 assertion, © failures 


Shutting down selenium standalone server. 
[launcher] chrome passed 
Amoss-MacBook-Pro:328505_09_01 Amos$ 








Protractor 的 测试 结果 


大 功 告 成 ! 这 便 使 用 E2E 测 试 覆 盖 了 应 用 的 目标 代码 。 实 践 中 最 好 使 用 这 些 方法 来 扩展 测试 
， 以 便 能 够 进行 更 广泛 的 E2B 测 试 。 




















浪 


10.4 ”总 结 


本 章 讨论 了 如 何 测试 MEAN 应 用 。 首先 是 了 解 了 关于 TDD 和 BDD 范 式 的 基本 概念 , 然后 使 用 
Mocha 测 试 框架 实现 了 对 Express 的 控制 器 和 模型 的 单元 测试 ， 这 里 面 用 到 了 几 个 不 同 的 断言 库 。 
接着 讨论 了 AngularJS 几 种 不 同 的 测试 方法 ， 知 道 了 单元 测试 和 E2E 测 试 的 区 别 ， 并 使 用 Jasmine 
测试 框架 和 Karma 测 试 执行 过 程 管 理工 具 对 AngularJS 应 用 进行 了 单元 测试 。 最 后 , 学习 了 如 何 编 
写 和 执行 E2E 测 试 。 到 目前 为 止 ， 本 书 已 经 介绍 了 如 何 创建 和 测试 实时 的 MEAN 应 用 ， 在 下 一 章 
中 ， 我 们 将 讨论 如 何 利 用 一 些 主流 的 自动 化 工具 来 持续 缩短 开发 周期 。 
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MEAN 应 用 的 调试 与 自动 化 








在 前 面 的 内 容 中 , 我 们 已 经 学 习 了 如 何 对 实时 的 MEAN 应 用 进行 开发 和 测试 , 并 且 了 解 了 如 
何 将 MEAN 应 用 的 各 部 分 组 合 在 一 起 ,以 及 如 何 使 用 测试 框架 来 测试 应 用 。 虽然 利用 上 述 内 容 中 
提 及 的 方法 就 可 以 对 相对 复杂 的 应 用 进行 开发 , 但 如 果 借助 一 些 支 持 性 的 工具 和 框架 , 开发 的 速 
度 将 可 大 幅 提 升 。 这些 工具 通过 自动 化 和 抽象 为 开发 者 提供 全 方位 的 开发 环境 。 本 章 将 介绍 如 何 
利用 社区 里 的 工具 加 速 MEAN 应 用 的 开发 。 其 主要 内 容 有 : 












































口 Grunt 简 介 

口 使 用 Grunt 任 务 和 第 三 方 任务 

口 使 用 node-inspector 调 试 Express 程 序 

口 使 用 Batarang 调 试 AngularJS 应 用 的 内 部 组 件 








11.1 构建 工具 Grunt 


与 其 他 的 软件 开发 一 样 ,MEAN 应 用 的 开发 常 稼 都 会 涉及 大 量 的 重复 性 工作 , 日 复 一 日 地 运 
行 、 测 试 、 调 试 , 为 生产 环境 配置 应 用 ,简直 千篇一律 ， 这 些 应 该 抽象 为 一 个 自动 化 层 来 完成 才 
对 。 你 可 能 听 说 过 Ruby 的 Rake 和 Java 的 Ant，JavaScript 中 的 重复 性 工作 ， 可 以 由 一 个 名 为 Grunt 
的 构建 工具 来 轻松 完成 。Grunt 是 一 个 Node.js 命 令 行 工具 ， 它 借助 第 三 方 定义 的 任务 以 及 用 户 自 
定义 的 任务 来 完成 项 目的 构建 。 也 就 是 说 , 你 可 以 编写 自己 的 自动 化 任务 , 或 者 更 简单 点 ， 直 接 
利用 不 断 成 长 的 Grunt 生 态 系统 中 的 任务 ,或 者 使 用 第 三 方 提供 的 常用 自动 化 操作 任务 。 本 节 将 
讨论 如 何 安装 、 配 置 和 使 用 Grunt。 本 章 中 的 示例 程序 依然 沿用 上 一 章 的 ， 直 接 复制 第 10 章 示例 
程序 的 最 终 版 即 可 。 









































11.1.1 安装 




















Grunt 入 门 最 好 的 办 法 是 从 使 用 Grunt 命 令 行 工 具 开 始 。 在 命令 行 中 使 用 下 面 的 命令 以 全 局 方 
式 安装 grunt-cl1i 模 块 : 





$ npm install -g grunt-c1i 
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这 便 可 以 将 Grunt 命 令 行 工具 的 最 新 版 安装 到 系统 的 node_modules 目 录 中 。 安装 完成 后 , 就 可 
以 在 命令 行 中 使 用 了 。 


Ka 在 安装 全 局 模块 时 可 能 会 碰 到 一 些 问 题 ， 一 般 是 权限 所 致 ， 使 用 sudo 或 超 
级 用 户 来 执行 全 局 安装 命令 即 己 O 





要 在 项 目 中 使 用 Grunt， 还 需要 使 用 npm 安 装 几 个 Grunt 模 块 到 项 目 文件 夹 中 。 此 外 ， 第 三 方 
任务 也 都 是 通过 npm 安 装 的 。 比 如 ， 一 个 比较 常用 的 ， 用 来 设置 系统 环境 变量 的 第 三 2 
grunt-env， 就 需要 以 Node 模 块 的 方式 来 安装 ， 然 后 由 Grunt 作 为 任务 使 用 。 下 面 将 grunt 和 
grunt-env 安 装 到 项 目 文 件 夹 中 ， 修 改 package json 文 件 如 下 : 


{ 





"name": "MEAN", 

UErSLON Ti O00 dL" 

"dependencies": { 
"express": "~4.8.8", 
morogan? ye Tw E30 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
eje vs TL.0.0; 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
"BasspBort ”V0.2:1";, 
"BasBsport=- lo0cal™: "SE..0.0", 
"passport-facebook":; "~1.0.3", 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
"ooket. Lon Vel 10" 
"connect-mongo": "~0.4.1"， 
"Cookie-parser": "~1.3.3" 

lL 

"devDependencies": { 
"ShouLred re m4.0 4 
"supertest": "~0.13.0", 
“earna" i MO L223 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4", 
"grunt": "~0.4.5", 
"grunt-env": "~0.4.1" 

} 

} 


然后 ， 在 命令 行 窗口 中 执行 如 下 的 命令 来 安装 新 依赖 : 


$ npm install 
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这 样 便 可 将 相应 版 本 的 grunt 和 grunt-env 安 装 到 项 目的 node_modules 文 件 夹 中 。 安装 完成 
后 ,就 可 以 在 项 目 中 使 用 Grunt。 首 先 需 要 创建 Grunt 要 使 用 的 配置 文件 Gruntfile.js。 





11.1.2 ”Grunt 的 配置 


要 想 对 Grunt 的 操作 进行 配置 ， 首 先 需要 在 应 用 的 根 目 录 中 为 其 创建 一 个 配置 文件 。Grunt 执 
行 时 ,会 自动 在 应 用 的 根 目 录 中 对 名 为 Gruntfile.js 的 配置 文件 进行 搜索 。 这 里 虽然 也 可 以 通过 命 
令 行 参数 来 指定 配置 文件 名 ,但 为 了 简便 还 是 使 用 默认 的 文件 名 。 


为 了 配置 grunt-env 任 务 , 进入 应 用 根 目 录 , 创建 名 为 Gruntfile.js 的 新 文件 , 文件 代码 如 下 : 























module.exports = function(grunt) { 
grunt .initConfig({ 
env: { 
dev: { 
NODE_ENV: 'development' 
} 
test: { 
NODE_ENV: 'test' 
} 
} 
}); 


grunt.loadNpmTasks ('grunt-env'); 

grunt .registerTask('default', ['env:dev']); 
已: 
正如 上 述 代码 所 示 ，Grunt 的 配置 文件 就 是 注入 了 grunt 对 象 的 单个 模块 函数 。 在 定义 了 模 
块 函数 后 ， 使 用 了 grunt .initconfig () 方 法 来 配置 第 三 方 的 任务 。 其 中 进行 了 grunt-env 任 
务 的 配置 ， 主 要 用 它 设置 了 两 个 环境 变量 ， 一 个 在 测试 时 使 用 ， 一 个 在 开发 时 使 用 。 接 着 使 用 
grunt .loadNpmTasks () 方 法 加 载 了 grunt -env 模 块 ， 注 意 ， 每 当 要 添加 一 个 第 三 方 任务 时 ， 
都 必须 用 这 个 方法 将 其 加 载 到 项 目 中 。 最 后 ， 使 用 grunt .registerTask () 方 法 创建 了 一 个 名 
为 default 的 grunt 任 务 。grunt .registerTask () 接 受 两 个 参数 ， 第 一 个 参数 是 任务 名 ， 第 
二 个 参数 是 需要 执行 的 其 他 的 grunt 任 务 集 。 通 常情 况 下 ， 当 需要 自动 执行 多 个 任务 时 ， 一 般 会 
用 这 个 方法 将 不 同 的 任务 组 合成 一 个 。 上 面 的 代码 中 ,default 任 务 (组 ) 只 用 一 个 grunt-env 
任务 对 环境 变量 进行 了 设置 。 


若 要 运行 这 个 aefault 任 务 ， 使 用 命令 行 工具 进入 应 用 根 目 录 ， 然 后 执行 如 下 命令 : 















































$ grunt 


这 便 可 以 使 用 grunt-env 来 设置 开发 环境 的 NoODE_ENV 环 境 变 量 。 这 个 例子 非常 简单 ， 下 而 
请 看 如 何 利用 grunt 将 更 复杂 的 操作 自动 化 。 

















< 
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你 可 以 通过 访问 Grunt 的 官方 文档 ( http://gruntjs.com/configuring-tasks ) 进 一 
一步 了 解 其 配置 。 


1. 使 用 Grunt 运 行 应 用 


通过 命令 行 运行 应 用 虽然 看 起 来 并 不 是 十 分 麻烦 , 但 在 应 用 开发 的 过 程 中 , 将 会 不 断 地 对 其 
进行 启动 和 停止 。 为 了 简化 这 项 工作 ， 一 个 名 为 Nodemon 的 工具 应 运 而 生 。Nodemon 是 Node.js 
的 一 个 命令 行 工具 ， 是 对 Node 基 本 命令 node 的 封装 ， 但 它 还 可 以 被 用 来 监视 文件 的 变化 。 当 有 
文件 发 生 修 改 时 ，Nodemon 便 可 使 用 最 新 的 代码 来 重新 启动 应 用 。Nodemon 可 以 直接 使 用 ， 也 可 
以 作为 一 个 Grunt 任 务 来 使 用 。 为 此 ， 需 要 安装 第 三 方 的 任务 grunt-nodemon， 并 在 配置 文件 中 
进行 配置 ， 然 后 就 可 以 使 用 了 。 首 先 来 安装 grunt -nodemon 模 块 ， 修 改 package.json 文 件 如 下 : 


t 

"name": "MEAN", 

VereLOm O00 LL" 

"dependencies": { 
"express": "~4.8.8", 
"morgan": "~1.3.0", 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ejs": "~1.0.0", 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
Dassport™ "O21™ 
"DAaBsport-lo0cal™: "LT..0.0", 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
SOCket. LO WL, .0% 
"connect-mongo": "~0.4.1"， 
"Cookie-parser": "~1.3.3" 






























































"devDependencies": { 
"should": "~4.0.4", 
"supertest": "~0.13.0", 
"karma.s MS~0.12..23") 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4", 
Tru VODs 
"grunt-env": "™~0.4.1", 
"grunt-nodemon": "~0.3.0" 
} 

} 


接 下 来 安装 新 的 依赖 。 使 用 命令 行 工具 进入 应 用 根 目录 ， 青 执行 如 下 命令 : 
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$ npm install 


这 便 可 以 将 特定 版 本 的 grunt -nodemon 安 装 到 项 目的 node_modules 文 件 夹 中 。 安 装 完成 后 
就 是 配置 了 ， 修 改 Gruntfilejs 文 件 如 下 : 








module.exports = function(grunt) { 
grunt.initConfig({ 
env: { 
test: { 


NODE_ENV: 'test' 
es 
dev: { 

NODE_ENV: 'development' 

} 
Fs 
nodemon: { 
dev: { 
script: 'server.js', 
options: { 
ext: 'js,html', 
watch: ['server.js', 'config/**/*.js', 'app/**/*.js'] 
} 
} 
} 
1 


grunt.loadNpmTasks('grunt-env'); 
grunt.loadNpmTasks('grunt-nodemon'); 


grunt .registerTask('default', ['env:dev', 'nodemon']); 
}; 
来 回顾 一 下 上 面 的 修改 。 上 述 代码 先是 修改 了 传 给 grunt .initconfig() 方 法 的 配置 对 象 ， 
添加 了 新 的 nodemon 属 性 。 该 属性 有 一 个 有 关 开 发 环境 的 配置 ， 其 中 script 用 于 定义 应 用 的 主 
文件 , 本 例 中 即 为 server .js。options 是 Nodemon 的 配置 选项 , 这 里 的 配置 是 告诉 它 监 视 config 
目录 和 app 目 录 中 所 有 的 JavaScript 文 件 和 HTML 文 件 。 最 后 加 载 了 grunt -nodemon 模 块 ， 并 将 其 
作为 子 任务 加 入 aefault 任 务 中 。 


在 命令 行 工 具 中 的 应 用 根 目 录 下 执行 如 下 命令 ， 便 可 使 用 新 修改 的 aefault 任 务 : 
$ grunt 


这 便 可 以 执行 grunt env 和 grunt -nodemon 任 务 » 并 启 动 应 用 o 
































你 可 以 通过 Nodemon 的 官方 文档 ( https://github.com/remy/nodemon ) 进一步 
~ 了 解 其 配置 。 
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2. 使 用 Grunt 测 试 应 用 


上 一 章 中 , 使 用 了 三 种 不 同 的 测试 工具 , 这 使 得 测试 工作 变 得 有 点 宛 长 。 在 这 种 情况 下 Grunt 
便 能 帮 上 忙 了 ， 它 可 以 运行 Mocha 、Karma 和 Protractor 。 只 需要 安装 grunt-karma 、 
grunt-mocha-test 和 grunt-protractor-runner 三 个 模块 并 对 其 进行 配置 即 可 。 先 来 安装 
它们 ， 修 改 package.json 如 下 : 

















t 

"name": "MEAN", 

METSoLON ,O01 

"dependencies": { 
"express": "~4.8.8", 
morgan™: "v3.0", 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"Teja ToL 0 0 
"connect-flash": "~0.1.1", 
"mongoose": "~3.8.15", 
"nassBort™y a0,2.1", 
"passport-local": "~1.0.0", 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
ee 
"connect-mongo": "~0.4.1"， 
"cookie-parser": "~1.3.3" 

} 

"devDependencies": { 
vshouldve Ts4.0%4",; 
"Upertest Ts "~0 13.0", 
“leona a v0 L223 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4", 
vgromt ee SO. 
"grunt-env": "~0.4.1", 
"grunt-nodemon": "~0.3.0", 
"grunt-mocha-test": "~0.11.0", 
"grunt-karma": "~0.9.0", 
"grunt-protractor-runner": "~1.1.4" 


} 
然后 使 用 命令 行 工 具 在 应 用 的 根 目录 中 执行 如 下 命令 : 
$ npm install 


这 样 便 可 将 相应 版 本 的 grunt-karma 、 grunt-mocha-test 和 grunt-protractor- 
runnez 安 装 到 应 用 的 node_ modules 目 录 中 。 接 着 还 需要 安装 Protractor 的 WebDriver 服 务 咒 ， 执 行 
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$ node modules/grunt-protractor-runner/node modules/protractor/bin/ 
webdriver-manager update 


安装 完成 后 ， 再 来 配置 新 的 Grunt 任 务 ， 修 改 Gruntfilejs 如 下 : 





module.exports = function(grunt) { 
grunt .initConfig({ 
env: { 
test: { 
NODE_ENV: 'test' 
了 
dev: { 
NODE_ENV: 'development' 
3 
ey 
nodemon: { 
dev: { 
script: 'server.js', 
options: { 
ext: 'js,html', 
watceh: ['seérver.jJs', "config/**/*.JS8", "abpD/**/*,jJSs"] 


} 
下 
mochaTest: { 
src: 'app/tests/**/*.js', 
options: { 
reporter: 'spec' 


unit: { 
configFile: 'karma.conf.js' 
} 
}, 
protractor: { 
e2e: { 
options: { 
configFile: 'protractor.conf.js' 


3 


grunt.loadNpmTasks('grunt-env'); 
grunt.loadNpmTasks('grunt-nodemon');} 

grunt .loadNpmTasks('grunt-mocha-test'); 
grunt.loadNpmTasks('grunt-karma'); 

grunt .loadNpmTasks('grunt-protractor-runner'); 


grunt.registerTask('default', ['env:dev', 'nodemon']); 
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grunt .registerTask('test', ['env:test', 'mochaTest', 'karma', 'protractor']); 


} 


上 面 的 代码 首先 修改 了 传 给 grunt . initconfig () 方 法 的 配置 对 象 ， 并 为 其 添加 了 新 属性 
mochaTest 对 象 。 该 新 添加 对 象 的 src 属 性 用 于 设置 搜索 待 测试 文件 的 位 置 ，options 属 性 用 于 
设置 Mocha 的 reporter。 然后 添加 了 karma 属 性 ， 其 unit 属 性 中 的 configrFile 用 于 设置 Karma 
的 配置 文件 名 。 此 外 ， 还 添加 了 protractor 属 性 ， 同 样 用 configFile 属 性 来 设置 Protractor 的 
配置 文件 名 。 接着 加 载 了 arunt-karma、 grunt-mocha-test 和 和 grunt-protractor-runner 
三 个 模块 ， 最 后 创建 了 包含 三 个 测试 子 任务 的 “test” 任 务 。 


若 要 执行 新 创建 的 “test” 任 务 ， 使 用 命令 行 工 具 进 入 应 用 根 目 录 ， 再 执行 如 下 命令 即 可 : 





i 





















































$ grunt test 


这 样 便 可 以 运行 grunt-env、mochaTest 、karma 和 protractor 来 测试 应 用 。 
3. 使 用 Grunt 验 证 代码 


在 软件 开发 中 ， 通 常会 使 用 专门 的 工具 来 验证 可 疑 代码 的 使 用 情况 。 在 MEAN 应 用 开发 中 ， 
借助 代码 验证 , 可 以 帮助 我 们 在 日 党 开发 中 避免 一 些 常见 的 问题 和 代码 错误 。 这 里 讨论 一 下 如 何 
利用 Grunt 对 项 目的 CSS 文 件 和 JavaScript 文 件 进行 验证 。 上 述 验 证 需要 借助 验证 CSS 文 件 的 
grunt-contrib-csslint 和 验证 JavaScript 文 件 的 grunt-contripb-jshint 来 实现 。 先 进行 安 
装 ， 修 改 package.json 如 下 : 





{ 

"name": "MEAN", 

全 天语 二 信用 由 站 vO 0 LEE"s 

"dependencies": { 
"express": "~4.8.8", 
Troan Tal 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ee TOO 
"connect-flash": "~0.1.1"， 
"mongoose": "~3.8.15", 
"DaSSDGOFELE "0..2..1", 
"Passport-local": "~1.0.0", 
"passport-facebook": "~1.0.3", 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
"SOGket.iOr Tl sla0", 
"connect-mongo": "~0.4.1", 
"Cookie-parser": "~1.3.3" 

} 

"devDependencies": { 
enouldye M4 .0 
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"supertest": "~0.13.0"， 

karmak m0 L223 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4", 
二 

"oun env Od 
"grunt-nodemon": "~0.3.0", 
"grunt-mocha-test": "~0.11.0", 
nogrunt=karmal te T0900 
"grunt-protractor-runner": "~1.1.4", 
"grunt-contrib-jshint": "~0.10.0", 
"grunt-contrib-csslint": "~0.2.0" 


然后 在 命令 行 工具 中 使 用 如 下 命令 来 安装 新 的 依赖 : 





$ npm install 

这 便 可 以 将 指定 版 本 的 grunt-contrib-csslint 和 grunt-contrib-jshint 模 块 安装 到 
项 目的 node_modules 文 件 夹 中 。 安 装 完成 后 ， 再 在 Grunt 中 进行 配置 ， 修 改 Gruntfile.js 文 件 的 内 容 
如 下 : 





module.exports = function(grunt) { 
grunt.initConfig({ 
env: { 
test: { 


NODE_ENV: 'test' 
i 
dev: { 
NODE_ENV: 'development' 
} 
J 
nodemon: { 
dev: { 
script: 'server.js', 
options: { 
xt. ey hen 
watens [Servyer. Ts, "Confio /Sy Salet/ je] 


} 
2 
mochaTest: { 
src: 'app/tests/**/*,js', 
options: { 
reporter: 'Spec' 


unit: { 
configFile: 'karma.conf.js' 
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jshint: { 
all: { 
src: ['server.js', 'config/**/*.js', 'app/**/*.js', 'public/js/*. 
'public/modules/**/*.js'] 


src: 'public/modules/**/*.css! 


grunt.loadNpmTasks ('grunt-env'); 
grunt.loadNpmTasks ('grunt-nodemon'); 
grunt.loadNpmTasks ('grunt-mocha-test'); 
grunt.loadNpmTasks ('grunt-karma'); 
grunt.loadNpmTasks('grunt-contrib-jshint'); 
grunt.loadNpmTasks('grunt-contrib-csslint'); 


grunt .registerTask('default', ['env:dev', 'nodemon']); 
grunt .registerTask('test', ['env:test', 'mochaTest', 'karma']); 
grunt .registerTask('lint', ['jshint', 'csslint']); 


2 

















js'， 


上 面 的 代码 中 ， 首 先是 修改 了 传 给 grunt .initconfig() 方 法 的 配置 对 象 ， 为 其 添加 了 两 
个 新 属性 ，jshint 对 象 和 csslint 对 象 。 其 中 ，jshint 对 象 的 src 用 于 告知 验证 需 需 要 检查 的 


























JavaScript 代 码 文 件 范围 ，csslint 对 象 的 src 属 性 同样 是 告诉 验证 器 需要 检查 哪些 CS 
着 加 载 了 新 添加 的 两 个 模块 ， 最 后 创建 了 以 两 个 新 添加 模块 为 子 任务 的 1int 任 务 。 


使 用 命令 行 工 具 进入 应 用 根 目 录 ， 运 行 如 下 命令 便 可 执行 新 添加 的 1int 任 务 : 








$ grunt lint 


S 文 件 。 接 


csslint 和 jshint 两 个 任务 运行 后 ， 便 会 在 命令 行 中 显示 报告 结果 。 验 证 顺 是 检查 代码 的 
好 工具 , 但 是 , 仍然 要 手动 执行 上 面 的 命令 才能 启动 检查 ， 下 面 介绍 一 个 方法 ,可 以 在 文件 被 修 








改 之 后 自动 执行 代码 验证 。 
4. 使 用 Grunt 监 视 文件 修改 


对 于 当前 Grunt 的 配置 ， 当 有 文件 修改 后 ，Nodemon 会 自动 重启 应 用 。 不 过 ， 如 果 想 在 文件 








被 修改 之 后 ,执行 其 他 任务 , 该 如 何 进 行 设置 呢 ?” 这 时 可 以 借助 grunt-contrib-wa 
完成 ， 它 可 以 用 来 监视 文件 的 修改 ,而 grunt-concurrent 则 可 以 同时 运行 多 个 任务 
可 以 安装 这 两 个 模块 ， 修 改 package.json 文 件 如 下 : 


{ 


"name": "MEAN", 
ersionr es VOR0. LL 
"dependencies": { 
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"express": "~4.8.8", 
myAn Vlad 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
"ejs": "~1.0.0", 
"onnect=flash", "0,.T,1L", 
"mongoose": "~3.8.15", 
"Dassport"s "~02.1", 
"passport-local™":; "~1.0.0", 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
VeoCket ,io val].0"; 
"connect-mongo": "~0.4.1", 
"Cookie-parser": "~1.3.3" 

Fs 

"devDependencies": { 
"Shoule Ys Woy 0 
"supertest": "~0.13.0", 
WR tr MeO 2 
"karma-jasmine": "~0.2.2", 
"karma-phantomjs-launcher": "~0.1.4", 
omunt": TQ 
"grunt-env": "~0.4.1", 
"grunt-nodemon": "~0.3.0", 
"grunt-mocha-test": "~0.11.0", 
"grunt-karma": "~0.9.0", 
"grunt-protractor-runner":; "~1.1.4", 
vrunt- GontirrD- -Tehint se "0% 00" 
"grint=-Contribb=Css1lint™: T0250"; 
"grunt-contrib-watch": "~0.6.1", 
"grunt-concurrent": "~1.0.0" 





} 
使 用 命令 行 工 具 进入 应 用 根 目录 ， 执 行 如 下 命令 安装 新 的 依赖 : 





$ npm install 


安装 完成 后 ， 接 下 来 是 在 Grunt 的 配置 中 对 新 的 模块 进行 配置 ， 修 改 Gruntfile.js 文 件 如 下 : 








module.exports = function(grunt) { 
grunt.initConfig({ 
env: { 
test: { 
NODE_ENV: 'test' 
} 
dev: { 
NODE_ENV: 'development' 
} 
jy 


nodemon: { 
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dev: { 
script: 'server.js', 
options: { 
exts Ishtml; 
watcehi UI NServer,.djes., Gonfig/ s/w. ey "dpD/** /S| 


} 
} 
mochaTest: { 
sre "app/teste/ /je 
options: { 
reporter: 'spec' 
} 
} 
karma: { 
unit: { 
configFile: 'karma.conf.js' 
} 
} 
Protraotorsnt 
e2e: { 
options: { 
configFile: 'protractor.conf.js' 


} 
} 
} 
jshint: { 
二 下 于 
SEC ["Seérver.jJ8', "config/**/*,.J8"; “apBp/**/*.Js', “public/jJSs/*.jJSs", 
'public/modules/**/*.js'] 
} 
) 
caslints { 
[四 关 区 二 
src: 'public/modules/**/*.css'! 
} 
js 
watch: { 
js: { 
files: ['server.js', 'config/**/*.js', 'app/**/*.js', 'public/js/*.js', 
'public/modules/**/*.js'], 
tasks: ['jshint'] 
}, 
css: { 
files: 'public/modules/**/*.css', 
tasks: ['csslint'] 
} 
}, 
concurrent: { 
dev: { 


tasks: ['nodemon', 'watch'], 
options: { 
logConcurrentOutput: true 
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grunt.loadNpmTasks 
grunt.loadNpmTasks 
grunt.loadNpmTasks 
grunt.loadNpmTasks 
grunt.loadNpmTasks ('grunt-protractor-runner'); 
grunt.loadNpmTasks ('grunt-contrib-jshint'); 
grunt .loadNpmTasks ('grunt-contrib-csslint'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-concurrent'); 


grunt-env');} 
grunt-nodemon'); 
grunt-mocha-test');} 
grunt-karma'); 


Ca 
种 
(! 
全 
全 
全 


grunt .registerTask('default', ['env:dev', 'lint', 'concurrent']); 
grunt .registerTask('test', ['env:test', 'mochaTest', 'karma', 'protractor']); 
grunt .registerTask('lint', ['jshint', 'csslint']); 
}; 
上 述 代码 先是 修改 了 传 给 grunt .initconfig() 方 法 的 配置 对 象 ， 增 加 了 两 个 新 任务 的 配 
置 。 前 一 个 是 配置 wat ch 任务 ， 其 用 于 监视 JavaScript 文 件 和 CSS 文 件 ， 当 有 文件 发 生变 化 时 ， 自 
动 执行 jshint 任 务 和 csslint 任 务 。 后 一 个 是 配置 concurrent 任 务 , 其 用 于 同时 执行 nodemon 
任务 和 watch 任 务 。 该 任务 还 有 个 1ogconcurrentoutput 人 参数 ， 当 其 设置 为 true 时 ， 可 记录 同 
时 执行 的 任务 的 终端 输出 。 配 置 完 后 , 使 用 grunt .1oadNpmTasks () 方 法 加 载 了 两 个 新 的 模块 ， 
最 后 在 default 任 务 中 增加 了 新 的 concurrent 子 任务 。 


修改 完 defau1lt 任 务 后 ,使 用 命令 行 工具 进入 应 用 根 目录 ， 执 行 如 下 命令 : 




















$ grunt 


如 此 ， 新 添加 的 任务 便 可 以 运行 了 ， 当 文件 有 修改 时 ,不 仅 会 重启 应 用 ,还 会 对 文件 进行 代 
码 检 查 。 


Grunt 是 个 强大 的 工具 ， 而 且 第 三 方 提供 的 任务 不 断 丰 富 着 Grunt 生 态 轿 ， 从 文件 压缩 到 项 目 
部 署 都 能 提供 很 好 的 支持 。Grunt 还 鼓励 社区 创造 各 种 新 的 任务 执行 工具 。 与 Grunt 类 似 的 工具 ， 
还 有 如 日 中 天 的 Gulp。 你 也 可 以 通过 Grunt 的 官网 ( http://gruntjs.com/ ) 来 查找 你 所 需要 的 自动 化 
工具 


一 -~ 一 o 








11.2 ”使 用 node-inspector 调试 Express 程序 


MEAN 应 用 中 Express 部 分 的 调试 是 个 麻烦 的 工作 。 好 在 有 node-inspector 这 样 出 色 的 工具 来 协 
助 。node-inspector 是 一 个 使 用 了 Blink ( 源 自 WebKit ) 开发 人 员工 具 的 Node,js 调 试 工 具 。 如 果 你 
用 过 Chrome 的 话 ， 你 应 该 不 难 发 现 node-inspector 的 界面 与 Chrome 开 发 人 员工 具 极其 相似 ， 它 支 
持 如 下 几 个 非常 有 用 的 调试 功能 。 
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口 源 代码 导航 
口 断 点 操作 
口 支持 单 步 执行 、 步 进 、 跳 出 、 恢 复 执行 
口 变量 和 属性 检查 

口 代码 实时 编辑 


在 利用 node-inspector 进 行 调试 时 ， 相 当 于 是 创建 了 一 个 跑 着 目标 代码 的 Web 服 务 器 。 通 过 奸 
容 它 的 浏览 器 访问 node-inspector 的 界面 ， 即 可 通过 它 来 调试 应 用 代码 。 在 使 用 之 前 ， 需 要 先 安装 
和 配置 node-inspector, 并 对 你 的 应 用 的 运行 方式 做 一 些小 的 修改 。node-inspector 既 可 以 独立 使 用 ， 
又 可 以 作为 Grunt 的 任务 来 使 用 。 前 面 已 经 使 用 了 Grunt， 因 此 这 里 采用 Grunt 任 务 的 方案 来 使 用 。 



























































11.2.1 ”使 用 Grunt 任 务 安装 node-inspector 





通过 Grunt 来 使 用 node-inspector 需 要 安装 的 模块 是 grunt-node-inspector ， 修改 
package.json 文 件 如 下 : 


t 

"name": "MEAN", 

"version": "0.0.11", 

"dependencies": { 
"express": "~4.8.8", 
morgan™s ~L.3.0", 
"compression": "~1.0.11", 
"body-parser": "~1.8.0", 
"method-override": "~2.2.0", 
"express-session": "~1.7.6", 
vj 0 
"connect-flash": "~0.1.1", 
"mongoose": "~3.8.15", 
"Dassnort™ TAO. 2 
"Dassport-local": "~1.0.0", 
"passport-facebook": "~1.0.3"， 
"passport-twitter": "~1.0.2", 
"passport-google-oauth": "~0.1.5", 
SOCket LO MLL.0%y 
"connect-mongo": "~0.4.1"， 
"Cookie-parser": "~1.3.3" 

由 

"devDependencies": { 

"should": "~4.0.4", 

"Upertest ns T0130", 

"korma™ sy T0212...23"; 

"karma-jasmine": "~0.2.2", 

"karma-phantomjs-launcher": "~0.1.4", 

We and ald bie: So fe 

"grunt-env": "~0.4.1", 

"grunt-nodemon": "~0.3.0", 
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"grunt-mocha-test": "~0.11.0"， 
"ograt=karma .0900T. 
"grunt-protractor-runner": "~1.1.4", 
"grunt-contrib-jshint": "~0.10.0", 
"grunt-contrib-csslint™: ™~0.2.0"5 
"grunt-contrib-watch": "~0.6.1", 
"runt-Goncurrent ys a1a0s0:, 


"grunt-node-inspector": "~0.1.5" 
} 
然后 使 用 命令 行 工具 进入 应 用 根 目录 ， 执 行 npm 命 令 进 行 安装 。 








$ npm install 


安装 成 功 后 ， 即 可 在 grunt 的 配置 文件 中 添加 配置 。 








11.2.2 ”使 用 Grunt 任 务 配置 node-inspector 


node-inspector 的 Grunt 配 置 与 其 他 的 任务 都 非常 类 似 。 但 依然 是 要 进行 配置 的 ， 编 辑 
Gruntfile.js 文 件 ， 配 置 node-inspector 任 务 如 下 : 























module.exports = function(grunt) { 
grunt.initConfig({ 
env: { 
test: { 


NODE_ENV: 'test' 
je 
dev: { 
NODE_ENV: 'development' 
} 
je 
nodemon: { 
dev: { 
script: 'server.js', 
options: { 
ext: 'js,html', 
watch: ['server.js', 'config/**/*.js', 'app/**/*.js'] 
} 
}, 
debug: { 
script: 'server.js', 
options: { 
nodeArgs: ['--debug'], 
ext: 'js,html', 
watch: ['server.js', 'config/**/*.js', '‘'app/**/*.js'] 


} 
}, 
mochaTest: { 
src: 'app/tests/**/*,js', 
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options: { 
reporter: 'spec' 








} 
} 
karma: { 
主攻 
configFile: 'karma.conf.js' 
} 
} 
PEOtEactorsnt 
e2e: { 
options: { 
configFile: 'protractor.conf.js' 
} 
} 
jshint: { 
a 
SG ["server.jJ8', "config/**/*.Js"; “apB/**/*.Js', “public/jS/*.jJSs", 
'public/modules/**/*.js'] 
} 
} 
GBSLINt:.:{ 
Bll A{ 
src: 'public/modules/**/*.css'! 
} 
} 
watch: { 
js: { 
files: ['server.js', 'config/**/*.js', 'app/**/*.js', 'public/js/*.js', 
‘public/modules/**/*.js'], 
tasks; ['jshint'] 
} 
GBS 
files: 'public/modules/**/*.css', 
tasks: ['csslint'] 
} 
} 
concurrent: { 
dev: { 
tasks: ['nodemon', 'watch'], 
options: { 
logConcurrentOutput: true 
} 
}, 
debug: { 
tasks: ['nodemon:debug', 'watch', 'node-inspector'], 
options: { 
logConcurrentOutput: true 
} 
} 
六 
'node-inspector': { 
debug: {} 
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grunt.loadNpmTasks('grunt-env'); 
grunt.loadNpmTasks ('grunt-nodemon');} 
grunt.loadNpmTasks('grunt-mocha-test'); 
grunt.loadNpmTasks('grunt-karma'); 
grunt.loadNpmTasks('grunt-protractor-runner');} 
grunt.loadNpmTasks ('grunt-contrib-jshint'); 
grunt .loadNpmTasks('grunt-contrib-csslint'); 
grunt.loadNpmTasks ('grunt-contrib-watch'); 
grunt.loadNpmTasks('grunt-concurrent'); 


grunt .loadNpmTasks('grunt-node-inspector'); 


grunt .registerTask('default', ['env:dev', 'lint', 'concurrent:dev']); 
grunt .registerTask('debug', ['env:dev', 'lint', 'concurrent:debug']); 
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma', 'protractor']); 
grunt .registerTask('lint', ['jshint', 'csslint']); 

地 


上 面 的 代码 主要 是 修改 了 传 给 grunt .initconfig() 方 法 的 配置 对 象 。 首 先是 修改 了 
nodemon 任 务 ， 添 加 了 一 个 Gebug 子 任务 ， 新 的 子 任务 通过 使 用 nodeArgs 属 性 ， 可 以 以 调试 模 
式 运 行 应 用 。 接 着 修改 了 concurrent 任 务 ， 同样 也 是 添加 了 debug 子 任务 ,该 子 任务 会 同时 执 
行 nodemon:debug 、watch 和 node-inspector 三 个 任务 。 第 三 个 改动 是 添加 了 名 为 
node-inspector 的 任务 配置 对 象 。 然后 加 载 了 新 的 grunt- node- inspector 模 块 。 最 后 添加 
了 新 的 aebug 任 务 ， 修 改 了 default 任 务 。 


















































过 和 你 可 以 通过 访问 Node-inspector 的 官方 文档 ( https://github.com/node- 
= i 进一步 了 解 其 配置 。 


11.2.3 ”使 用 Grunt 任 务 运 行 调试 
使 用 命令 行 工具 进入 应 用 根 目 录 ， 执 行 如 下 命令 运行 新 的 aebug 任 务 ; 








$ grunt debug 


这 样 便 可 以 开启 node-inspector 的 服务 器 ,并 以 调试 模式 启动 应 用 。 命令 行将 会 出 现 与 下 图 类 
似 的 输出 。 
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9 A 328509S_10 01 一 node 一 80x24 
Amoss-MocBook-Pro:328505_19_01 Amos$ grunt debug 
Running “envidev”(eny) task 


Running "jshint:att” hint) task 
21 files lint free， 


Running_ "csslLintiott”(csslint) tosk 
>> 0 files lint free. 


Running "concurrent debug” (concurrent) tosk 
me 四 


debugger listening on port 5858 

Node Inspector vO.7.4 

Visit http://127.0.0.1:80890/debug?portm5858 to start debugging. 
Server running at http://localhost:3000/ 


node-inspector 的 命令 行 输 出 





根据 node-inspector 的 命令 行 输出 提示 ， 通 过 浏览 器 访问 http:/127.0.0.1:8080/debug?por 人 = 





5858using 便 可 开始 调试 。 在 Chrome 中 打开 上 述 地 址 ， 可 以 看 到 如 下 的 网 页 。 








a 
Node nspector 
€ C 127.0.0.1 三 
SOurcesi Console 
er 站 Ih ye 
exports, require, nodule, filenane, _ dirnane) { process.en vw 
. oose re ( 
c 和 eqv € 
db ongoose.connecticonfig.db) - 
F Bre 
f 本 
express eauirel 
9p podul xpor expre 
过 
Pp requirel ) 
p 1 
pp. listen(3 Vr 
console, log Yn 
})); 
Ev 
3 @ 0 党 











node-inspector 的 调试 界面 




















上 面 的 网 页 界面 中 , 左 侧 是 项 目的 文件 目录 树 , 中 间 是 文件 内 容 查 看 顺 , 右 侧 是 调试 工具 栏 。 
看 到 这 个 界面 ,就 表明 node-inspector 已 经 正常 运行 , 并 且 已 经 识别 到 了 Express 项 目 。 可 以 通过 设 





置 断 点 来 测试 应 用 各 组 件 的 行为 。 
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| node-inspector 只 能 在 支持 Blink 引 党 的 Google Chrome 和 Opera 上 使 用 。 | 


11.3 ”使 用 Batarang 调试 AngularJS 程序 


MEAN 应 用 中 AngularJS 部 分 通常 都 是 在 浏览 器 中 完成 的 。 但 对 AngularJS 的 内 部 操作 进行 调 
试 就 比较 环 手 了 。 为 了 解决 这 个 问题 ，AngularJS 团 队 开发 了 一 款 名 为 Batarang 的 Chrome 插 件 。 
Batarang 是 直接 对 Chrome 开 发 人 员工 具 进 行 扩展 , 创建 了 一 个 新 的 标签 页 , 可 对 AngularJS 应 用 进 
行 全 方位 的 调试 。Batarang 的 安装 也 很 简单 ， 直 接 用 Chrome 打 开 Chrome 应 用 商店 
( https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcemcojjgiloacoafimpfk )， 
再 点 击 “安装 ”按钮 即 可 。 但 是 ， 应 用 商店 的 版 本 目前 并 不 是 非常 的 稳定 ， 使 用 也 不 是 很 方便 ， 
本 书 将 以 0.4.3 版 为 例 进行 介绍 。0.4.3 的 安装 步骤 如 下 所 示 。 


口 打开 https://github.com/angular/angularjs-batarang/releases ， 找 到 0.4.3 版 本 的 zip 包 下 载 ， 下 
载 完 成 后 解压 到 本 地 磁盘 中 的 任意 目录 ， 文 件 夹 名 为 angularjs-batarang-0.4.3。 

口 打开 Chrome， 点 击 菜单 “更 多 工具 ”下 的 “扩展 程序 ” ， 打 开 Chrome 的 扩展 管理 界面 。 

口 勾 选 扩展 管理 界面 右上 和 角 的 “开发 者 模式 ” 复 选 框 ， 会 出 现 几 个 隐藏 的 按钮 。 

口 点 击 新 出 现 的 “加 载 正在 开发 的 扩展 程序 ... ”按钮 ,然后 选择 刚刚 解压 的 angularjs-batarang- 
0.4.3 文 件 夹 ， 再 点 击 “ 确 定 ” 按 钮 即 可 完成 安装 。 













































































| Batarang 只 支持 Google 的 Chrome 和 Chromium 浏 览 器 。 | 


Batarang 的 使 用 


安装 完成 后 ， 在 Chrome 中 打开 MEAN 应 用 ， 再 打开 Chrome 开 发 人 员工 具 面 板 , 便 可 以 看 到 
一 个 名 为 AngularJS 的 标签 页 ， 点 击 打开 它 ， 可 以 看 到 一 个 和 下 图 类 似 的 界面 。 
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分 





In order to begin using the Batarang you need to click the “enable” checkbox. This will cause the application's tab to refresh, and the Batarang 
to begin collecting perfomance and debug information about the inspected app. 


The Batarang has five tabs: Model, Performance, Dependencies, Options, and Help. 


Models 


个 口 日 Developer Tools - http://angularjs.org/ ww 


Eemems Resources Network Sources Timeline Profiles Audits Console | Angular]s 


Models 





Dependencies Options Heip WM Enable 


Models 


Roct | 007 


Scope (6967) | scopes 
Scope (808) | scopes | models 
Scope (090A) | models 


sshashKey: 0809 
Scope {08C) | models 
todo: 
text: build an angular app 
done: false 
sshashKey: 908 





个 日 日 Developer Tools - http:/ /localhost:3000/ 国 
QA Eements Network Sources Timeline Profiles Resources Audits Console Angularj5i PageSpeed 色 3 a, 
Models Performance Dependencies Options Help Enable 








Batarang 的 界面 





注意 , 若 要 使 用 Batarang, 需要 先 选中 面板 顶部 的 “Enable” 复 选 框 。Batarang 有 四 个 标签 页 ， 





1. Batarang 查 看 模型 


进入 Batarang 的 Models 页 ， 便 可 以 看 到 与 下 图 类 似 的 界面 。 
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1 是 Models、Performance 、Dependencies 和 Options ，Help 中 是 对 Batarang 的 使 用 介绍 。 
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全 日 日 Developer Tools - http:;/ /localhost:3000/ 加 
QA Elements Network Sources Timeline Profiles Resources Audits Console IAngulagSs| PageSpeed 2 类 9a, 


Models Pertormance Dependencies Options Help Wh Enable 


Scopes Models for (003) 
{ 
< Scope (091) authentication: 1 
< Scope (862) user: { 
< Scone (003) -id: 53aa047e6c86c3e765139aff 
< Scope (005) salt: naNU602866566\ .60 


provider: local 
firstNane: test@test.com 
lastNane: test@test,com 
enail: test@test.con 
username: test@test.com 
Vv: 
created; 2014-06-24723:86;38,473Z 
fullName: test@test.com test@test.com 
1d: 53a8047]e6c85c3e765139aff 
} 
} 
create: null 
delete: null 


update: null 
find: null 
find0ne: null 
articles: 
[1 
creator: { 
firstNane: amos@anos.con 
lastNane: anos@aros.com 
-1d:; 538f998dalcc9e7c805b7843 
fullNane: amos®aros .Com ap05Eanos,5Com 
id: 538f998daicc9e7c8b5b7843 
} 
-id: 5381999eaicc9e7c805b7844 
EX 


content: test 
title: amos 











Batarang 的 模型 页 


在 面板 的 左 侧 ， 可 以 看 到 当前 页 的 scopes 层 级 。 选 中 一 个 scope 后 ， 对 应 的 model 便 会 显示 在 
面板 的 右 侧 。 上 面 的 屏幕 截图 中 ， 可 以 看 到 前 面 的 articles 模 型 。 


2. Batarang 查 看 性 能 
进入 Batarang 的 Performance 页 ， 可 以 看 到 和 下 图 类 似 的 界面 。 
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Models Performance Dependencies Options 


Performance 


Log to conscle 


Watch Tree 


Scope (001) | 1oggle 
se Slocationwatch 
» autoSscrollWatch 


Scope (002) | toggle 
Scope (003) | toggle 


“SwatchCollectionwatch 
aa !articles || artictes, length 


Scope (005) | toogle 
w/articles/{{article. _id)} 
ao {article.title)} 
on {{article.creasted | 

date: ‘medium'}} / 
{{article. creator. fullName)} 
0 {tarticle. content)} 





Help 以 Enable 


Watch Expressions 


{iarticle.created date: ‘medium’)} / 
{{article.creator.fullName)}} |47.6% | 1.076ms 


larticles || articles.longth |23.9% |0.5390ms 


S$watchCollectionwatch | 13.4% | 0.3030ms 
$locationWatch | 11.2% | 0.2540ms 


autoScrollwatch | 2.35% | 0.05300ms 


#i/articles/{{article. id})} |0.664% |0.01500ms 


{iarticie.title)}} |0.620% | 0.01400ms 


{{article.content}} |0.221% | 0.005000ms 


Filter expressions 
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[eee Developer Tools ~ http:/ /localhost:3000/ A 
Q Elements Network Sources Timeline Profiles Resources Audits Console jiAngularSi PageSpeed 污 关口 , 














Batarang 的 性 能 页 


在 面板 的 左 侧 ,可 以 看 到 以 树 状 组 织 的 应 用 内 所 有 监视 的 表达 式 ， 面板 的 右 侧 ,可 以 看 到 应 
用 内 所 有 监视 的 表达 式 的 性 能 状态 和 相对 大 小 和 绝对 耗 时 。 上 图 中 是 articles 的 性 能 报告 。 


3. Batarang 查 看 依赖 


进入 Batarang 的 Dependencies 页 ， 可 以 看 到 和 下 图 类 似 的 界面 。 
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MEAN 应 用 的 调试 与 自动 化 
个 旺 Developer Tools -~ http;/ /localhost-3000/ 
QQ Elements Network Sources Timeline Profiles Resources Audits Console Angularsi PageSpeed 》 > Oa, 
Me Dependencies Oplions tk WM Enable 
Service Dependencies 
六 
2 忆 
2 
和 
吕 关 
和 § 
经 EE 
加 3 
SR 
名 中 
4utm 
9m ol 
Ca snp 
Articles Siocation 
多 
SR 
£ 
他 外 
地 
个 ed ” 
咏 
Batarang 的 依赖 页 





该 依赖 页 以 可 视 化 的 方式 展示 了 AngularJS 应 用 中 的 服务 依赖 。 当 用 鼠标 悬 停 在 某 个 服务 上 
时 ， 被 选中 的 服务 会 变 成 绿色 ， 它 的 依赖 会 变 成 红色 。 





4. Batarang 的 选项 


Batarang 还 可 以 对 AngularJS 的 组 件 元 素 进 行 高 亮 。 进 入 Batarang 的 Options 页 ， 可 以 看 到 和 下 
图 类 似 的 界面 。 
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HAOO Developer Tools ~ http:/ /localhost:3000/ 
Q Elements Network Sources Timeline Profiles Resources Audits Console |AngulaySs| PageSpeed = 净 口 
Options elp MM Enable 
Options Info 
VM Show applications Angular version' 1.2.19-builld.258+sha.ea653e4 snapshot 
MM Show bindings Angular CDN status 


M Snow scopes 











Batarang 的 选项 页 


当 这 三 个 选项 被 选中 时 ，Batarang 会 对 应 用 中 对 应 的 部 分 单独 高 亮 。scopes 会 用 红色 框 表 示 ， 
绑 定 使 用 蓝 色 框 表示 ， 应 用 会 用 绿色 框 表示 。 


Batarang 是 个 简单 而 又 强大 的 工具 ， 如 果 没 有 它 ， 调 试 时 只 能 通过 在 终端 打印 日 志 的 方式 来 


定位 错误 ， 利 用 Batarang 可 以 节约 大 量 时 间 。 好 好 地 理解 Batarang 每 个 标签 页 的 功能 ， 并 用 它 来 
查看 应 用 的 各 个 组 件 吧 。 























11.4 ”总 结 


本 章 介绍 了 如 何在 MEAN 应 用 开发 中 使 用 自动 化 的 工具 。 其 中 包括 怎样 分 别 调试 应 用 中 的 
Express 部 分 和 AngularJS 部 分 , 如 何 使 用 Grunt 及 其 生态 圈 中 的 大 量 第 三 方 任务 , 如 何 用 Grunt 使 用 
一 般 的 普通 任务 , 以 及 如 何 将 多 个 任务 组 合成 自 定义 任务 。 还 讨论 了 node-inspector 的 安装 和 配置 ， 
及 如 何 使 用 Grunt 和 node-inspector 来 调试 Express 代 人 码 。 最 后 ， 还 介绍 了 Chrome 扩 展 Batarang 的 使 
用 ,包括 它 的 功能 ， 及 如 何 用 它 对 AngularJS 应 用 的 内 部 进行 调试 。 


本 书 的 内 容 就 到 此 为 止 了 ,想必 你 已 经 学 会 了 MEAN 应 用 的 开发 、 运 行 、 测 试 、 调 试 ， 以 及 
自动 化 工具 的 使 用 了 吧 。 


路 在 脚下 ， 任 你 问 范 ! 
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欢迎 加 入 


图 灵 社 区 ITuring.cn 





最 前 沿 的 IT 类 电子 书 





发 售 平台 





电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹豫 稍 律 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行 
动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 
DRM-free 的 阅读 体验 : 在 线 阅读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 
片 《 即 使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 

图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 
网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 出 版 模式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 
以 较 快 的 速度 了 解 到 国外 最 新 技术 图 书 的 内 容 ， 弥 补 以 往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺 钴 。 同 






































时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 
书 出 版 的 质量 。 



























































的 交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 图 








优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 兑换 纸 质 样 书 。 





最 方便 的 开放 出 版 平 


图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 功 





人 
日 








? 








能 
你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。( 收费 形式 须 经 过 





























图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 社 区 就 能 帮助 你 实 
这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 





图 灵 社 区 引进 出 版 的 外 文 图 书 


















































， 都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 








你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 
翻译 工作 ， 是 需要 有 坚强 的 角力 的 。 











最 直接 的 读者 交流 平 


人 
日 








在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 勘 误 、 发 表 评论 ， 以 各 种 方式 与 作 译 者 、 编 辑 人 

















员 和 其 他 读者 进行 交流 互动 。 提 交 昌 





误 还 能 够 获 赠 社区 银子 。 











你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 遍 取 积 分 和 银子 ， 积 累 个 人 声望 。 
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关注 图 灵 教 育 关注 图 灵 社 区 
iTuring.cn 


在 线 出 版 ”电子 书 《 码 农 》 杂 志 图 灵 访 谈 




















人 a 


QQ 联系 我 们 





妈 灵 读者 官方 群 I: 218139230 
妈 灵 读者 官方 群 [[: 164939616 


微 博 联系 我 们 



































官方 账号 ，@ 图 灵 到 灵 社 
市 场合 作 : @ 图 灵 袁 野 
写作 本 版 书 : @ 图 灵 小 花 

翻译 英文 书 ，@ 李 松 峰 @ 朱 癌 ituring @ 楼 伟 
日 文书 或 文章 ，@ 图 灵 乐 区 

译 韩文 书 ， @ 图 灵 陈 曦 
书 合作 : @hi_jeanne 

妈 灵 访谈 /《 码 农 》 杂 志 : @ 李 盼 ituring 
入 我 们 ，@ 王 子 是 好 人 
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微 信 联 系 我 们 


turingbooks ituring_interview 





MEAN 是 流行 的 现代 Web 开 发 工具 的 集合 ， 包 括 MongoDB、Express、AngularJS 和 Node.js， 为 现代 Web 
开发 提供 了 一 种 创新 性 的 方法 。 

本 书 从 MEAN 核 心 框架 的 安装 和 配置 讲 起 ， 以 实际 项 目 为 主线 ， 讲 解 了 每 个 框架 的 基本 概念 、 使 用 方法 ， 
以 及 如 何 使 用 主流 的 模块 把 它们 融合 在 一 起 。 书 中 通过 现实 示例 介绍 了 如 何 搭建 MEAN 应 用 架构 ， 添 加 权限 管 
理 层 ， 创 建 MVC 架 构 来 协助 项 目的 开发 。 此 外 还 介绍 了 如 何 测试 和 调试 MEAN 应 用 ， 以 及 如 何 灵活 运用 不 同 的 
工具 和 框架 来 加 速 日 常 开发 进程 。 通 过 学 习 本 书 ， 你 可 以 迅速 掌握 MEAN 开 发 的 思路 ， 创 建 自己 的 完整 的 
MEAN 应 用 。 

如 果 你 是 Web 开 发 者 或 ( 想 成 为 ) 全 栈 JavaScript 程 序 员 ， 想 使 用 MEAN 创 建 现 代 Web 应 用 ， 那 么 本 书 是 你 
的 必 读 之 书 ! 


通过 学 习 本 书 ， 你 将 能 


创建 和 运行 Express 应 用 

使 用 MongoDB 存 储 和 检索 应 用 数据 . 

将 Express 应 用 连接 到 MongoDB， 使 用 Mongoose 模 块 Pa 
使 用 Passport 来 管理 用 户 权 限 ， 提 供 第 三 方 账号 的 登录 AAA A 
在 MEAN 项 目 中 构建 和 使 用 AngularJS 应 用 


使 用 Socket.io 来 创建 客户 端 与 服务 器 之 间 的 实时 通信 连接 
进行 Express 和 AngularJS 应 用 测试 
使 用 流行 的 第 三 方 工具 来 提升 MEAN 应 用 开发 的 效率 一 


ISBN 978-7-115-39663-1 
. 由 > 


ISBN 978-7-115-39663-1 
分 类 建议 计算 机 /Web 开 发 -定价 5900 元 





看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com ， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精 彩 人 生 
微 信 图 灵 教 育 : turingbooks 


